[CSS] 선택자 종류

1. *

* {
 margin: 0;
 padding: 0;
}

* 은 페이지 전체 요소를 대상으로 한다.

간단한 테스트용으로는 괜찮지만 실전에서는 브라우저에 과부하가 걸릴 수 있기 때문에 사용에 적절하지 않다.

 

*을 자식 선택자에도 사용할 수 있다.

#container * {
 border: 1px solid black;
}

위 코드는 #container div 의 자식 요소 전체를 대상으로 한다.

 

2. #X

#container {
   width: 960px;
   margin: auto;
}

#은 id 선택자이다.

가장 흔하게 사용되는 선택자이지만 id 선택자를 사용할 때 고민해보아야 한다.

id 선택자는 유연성이 없고 재활용할 수 없기 때문에 이 요소를 대상으로 id를 필히 적용해야 할까? 라는 질문을 던져보고 대안으로 클래스를 사용하는 것이 나을 수도 있다.

 

3. .X

.error {
  color: red;
}

. 은 class 선택자이다.

class는 id와 다르게 여러 개의 요소를 대상으로 할 수 있다.

 

4. X Y

li a {
  text-decoration: none;
}

descendant 선택자이다.

선택자를 이용해 더 상세히 작업해야 할 때 이 선택자를 사용한다.

a 전체 태그를 대상으로 하기 보다 li 밑에 있는 a 만 대상으로 하고 싶을 때 위의 코드를 사용한다.

 

5. X

a { color: red; }
ul { margin-left: 0; }

type 선택자이다.

id나 class가 아닌 한 페이지에 있는 한 타입을 모두 대상으로 하고싶을때 사용한다.

 

6. X:visited / X:link

a:link { color: red; }
a:visted { color: purple; }

링크를 클릭하기 전 상태를 대상으로 :link 가상 클래스를 사용하고

링크를 클릭한 후 상태를 대상으로 :visitied 가상 클래스를 사용한다.

 

7. X + Y

ul + p {
   color: red;
}

'인접 선택자' 라고 부르는 선택자이다.

앞의 요소 바로 뒤에 있는 요소만 선택한다.

위 코드에서 각 ul 뒤에 오는 첫 번째 단락(p)의 텍슽만 빨간색이 적용된다.

 

8. X > Y

div#container > ul {
  border: 1px solid black;
}

X > Y 는 X Y와 다르게 직계 자식만을 선택한다.

#container > ul 선택자는 id 가 container인 div의 직계 자손인 ul만 대상으로 삼는다.

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

위 코드에서 container 바로 밑에 있는 ul은 스타일이 적용 되지만 li 밑에 있는 ul은 스타일이 적용되지 않는다.

 

9. X ~ Y

ul ~ p {
   color: red;
}

형제 선택자 이다.

인접 선택자(ul ~ p)는 앞의 선택자 바로 뒤에 오는 첫번째 요소만을 선택하지만, 이 형제 선택자는 ul 바로 아래 있는 모든 p를 선택한다.

 

10. X[title]

a[title] {
   color: green;
}

속성 선택자(Attributes seletor)이다.

위 예시에서 a태그에 title 속성이 있는 태그를 선택한다.

 

11. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}	

라디오 버튼이나 체크박스처럼 체크되는 UI를 대상으로 한다.

 

12. X:after

p::after {
  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

X 태그 뒤에 content를 덧붙인다.

 

13. X:hover

a:hover {
 border-bottom: 1px solid black;
}

X 태그에 마우스를 올렸을 때 스타일이 적용됩니다.

 

14. X:not(선택자)

div:not(#container) {
   color: blue;
}

negation 가상 클래스이다.

위 예제에서 모든 div 중 id가 container인 것을 제외하고 선택하고 싶을 때 사용한다.

 

15. X::가상요소

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

p의 첫번째 글자에 스타일 적용하는 예제.

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

p의 첫번째 라인에 스타일 적용하는 예제.

 

16. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

여러 요소 중에서 n번째 자식을 선택한다.

위 예제에서 li의 자식 중 4번째 자식을 선택한다.

4번째 마다 선택하고 싶다면 li:nth-child(4n)으로 작성하면 된다.

 

홀수번째 마다 선택하고 싶다면 li:nth-child(odd),

짝수번째 마다 선태갛고 싶 다면 li:nth-child(even) 으로 작성하면 된다.

 

17. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

위 예제에서 li 태그의 자식 중 마지막 2개를 선택한다.

자식 태그들이 아주 많을 때 뒷부분을 선택하고 싶을 때 유용하다.

 

18. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

위 예제에서 ul 태그가 여러 개 있을 때 ul 태그 중 3번째 ul 태그를 선택한다.

 

19. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

위 선택자와 비슷하지만 문서의 뒷쪽부터 찾는다.

 

20. X:first-child

ul li:first-child {
   border-top: none;
}

첫번째 자식만을 선택할 때 사용한다.

 

21. X:last-child

ul > li:last-child {
   color: green;
}

마지막 자식을 선택한다.

 

 

---

참고자료(code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048,www.w3schools.com/cssref/css_selectors.asp)