[CSS] Selector(선택자)

Selector(선택자)

/* link된 html내 전체 선택 */
* {
}

/* 기본적인 tag 선택자 */
h1 {
}

p {
}

/* class에 대한 선택자(name__description이라는 클래스를 선택) */
.name__description {
}

/* id에 대한 선택자(name1이라는 아이디를 선택) */
#name1 {
}

/* 특정 태그이면서 특정 클래스에 대한 선택자(chaining) */
h1.class__name {
}

/* 특정 태그의 자식 태그 선택 */
h1 li {
}

/* pseudo-class(hover의 경우 마우스를 위에 올렸을 때 적용되는 선택자) */
p:hover {
}

/* 1. anchor 태그의 href값내에 flower가 포함된 경우에 대한 선택자 */
a[href*='flower'] {
}

/* 2. img 태그 중 src 내에 jayden이라는 문자를 포함한 경우에 대한 선택자 */
img[src*='jayden'] {
}

/* 여러 태그에 같은 스타일을 적용하는 경우 */
h1, h2, h3, p {
}

 

가장 중요한 점!
선택자는 동등한 위치의 경우엔 뒤에 등장한 스타일이 적용되지만, 그게 아니라면 더 디테일한 선택자가 더 우선적으로 적용된다.
ex) h1보다 h1 li의 스타일이 더 위에 있어도 적용됨(더 디테일한 선택자니까) 일반 tag < class < id 즉, id가 더 디테일한 선택자