[CSS] 선택자 정리 + 헷갈리는 선택자

https://devahj.tistory.com/83

과거 정리해둔 것이 있지만 허접한 정리는 잊고 다시 싹 다 정리해본다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors

어김 없이 MDN부터 출발

기본 선택자(Basic selectors)

전체 선택자(*) -> 문서 내 모든 요소(element) 선택

* {
}

타입 선택자(elementname) -> 해당 이름을 가진 모든 요소를 선택

/* for example*/
div {
}

 -> 모든 div 요소들이 선택된다.

클래스 선택자(.classname) -> class 특성(attribute)이 classname인 모든 요소를 선택

<div class="one"></div>인 태그가 있을 때 .one으로 해당 요소 선택 가능

.one {
}

ID 선택자(#idname) -> id 특성(attribute)이 idname인 요소를 선택. 하지만 문서 내에서 하나의 id는 하나의 요소(element)에만 존재해야 하므로 결국은 idname인 요소 1개를 선택한다.

#only-one {
}

특성(attribute) 선택자([attr]) -> 오늘의 main point 하단에서 다시 정리

우선순위 계산 관련은 해당 글 참고https://devahj.tistory.com/103

그룹 선택자(Grouping selectors)

선택자 목록(,)(그냥 쉼표로 여러 선택자들을 묶어줄 수 있다는 의미)

div,
span {
}

 해당 css 선택자는 div, span에 모두 적용되는 css가 적힌다.

결합자(Combinators)

자손(descendant) 결합자(A (공백)B) -> A(첫번째 요소)의 자손인 모든 B를 선택

div span {
}

 -> div는 선택되는 것이 아니고 span 중에 div의 자손(descendant)인 놈들은 모두 선택된다.

자식(child) 결합자(A>B) -> A 바로 아래 자식(child)인 B를 선택

div > span {
}

-> div는 선택되는 것이 아니고 span 중에 div의 바로 아래 자식(direct child)인 모든 span들이 선택된다. 물론 div 바로 아래 자식인 span이 여러개일 수도 있기 때문에 '모든' 인 것이다.

일반 형제(siblings) 결합자(A~B) -> A의 형제 즉, A를 뒤에 오면서 같은 부모(parent, 조상이 아니다)를 공유하는 모든 B를 선택

div ~ span {
}

 -> div는 선택되는 것이 아니고 span 중에 div 뒤에 나오면서 div의 형제 위치에 동등하게 존재하는 모든 span이 선택된다.

인접 형제 결합자(A+B) -> A의 인접(adjecent) 형제 즉, A의 바로(immediately) 뒤에 위치하면서 같은 부모(parent, not ancestor)를 공유하는 B를 선택

div + span {
}

 -> div는 선택되는 것이 아니고 span 중에 div의 바로 다음 형제(immediately)인 모든 span들이 선택된다. 물론 div 바로 다음 형제인 span이 여러개일 수 있기 때문에 '모든'인 것이다.

 

열 결합자 -> mdn을 보라 써본 일이 없다.

가상 클래스/요소(Pseudo Class/Elment) 선택자

https://devahj.tistory.com/101?category=894824 

참고

 

 

헷갈리기 쉬운 선택자(속성 선택자)

1. [attr] -> 가령 [class] 속성 선택자는 class attribute를 가진 요소는 모두 선택한다. value는 고려하지 않는다.

2. [attr=value] -> [class="one"] class의 value가 one과 정확히 일치하는 요소(즉, 단어)를 선택. 요소가 다른 value도 가지고 있으면 선택되지 않는다.

3. [attr~=value] -> 2번과 마찬가지로 attr의 value가 정확히 일치하는 요소(즉, 단어)를 선택하되, 차이는 요소가 다른 value를 가져도 선택 가능

4. [attr^=value] -> value로 시작하는 요소를 선택

5. [attr$=value] -> value로 끝나는 요소를 선택

6. [attr*=value] -> value가 문자열로 적어도 하나 이상 존재하는 요소를 선택 3번과의 차이는 3번 단어, 6번은 문자열 기준이라서 3번이 좀더 엄격하다고(?) 할 수 있겠다.