CSS 선택자

선택자의 정확한 정의를 찾아봤으나 다들 선택자에 어떤게 있는지만 구구절절...

다양하게 찾아본 결과

"내가 고른 스타일링 기법을 어디에 적용하는지 선택하는 것"

이라고 결론을 냄

 

1. class, ID

#class-name

.ID-name

 

2. 자식(children)

.div1 i

여기서 i가 div의 자식이 되는 것

div1 안의 모든 i에 적용됨

 

2-1.직속 자식(direct children)

.div1 > i

div1의 직속 자식에게만 적용됨.

div1 안의 div2 안의 i는 직속 자식이 아니라서 적용 안됨

 

3. 복수 선택

.div1, .div2

,를 통해 여러 요소를 선택 가능

 

4. 여러 조건

.div1.div2

div1 클래스와 div2 클래스를 가진 요소에 적용

 

5.가상 클래스(pesudo-class)

:를 사용해서 가상 클래스를 선택할 수 있음

.div1 p:nth-child(3)

.div1의 자식인 <p> 태그 중 3번째 

.div1 p:first-child

.div1의 자식인 <p> 태그 중 첫 번째

.div1 p:last-child

.div1의 자식인 <p> 태그 중 마지막

.div1 p:not(:last-child)

.div1의 자식 중 마지막 자식이 아닌 <p> 태그

.div1 p:not(:first-child)

.div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 

 

6. 마우스 오버(hover)

.div:hover

:hover를 붙이면 해당 요소에 마우스가 올라갔을 때 어떻게 바뀔지 선택 가능

 

 

그리고 한번쯤 보면 좋을 것 같은 링크

https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

반드시 기억해야 하는 CSS 선택자 30개