💡 이 글은 아래 사이트를 참조하여 작성하였습니다.
CSS selector - MDN Web Docs

CSS Selector?

스타일을 적용할 요소를 정의합니다

기본 선택자

Tag 선택자

해당 되는 모든 tag에 대해서 적용

h2{color:red;}

Class 선택자

Class 이름이 해당되는 tag에 대해서 적용

.클래스명 으로 접근

.myclass {color:green;}

ID 선택자

Id가 해당되는 tag에 대해서 적용

#id명 으로 접근

#myid {color:blue;}

속성 선택자(Attribute Selectors)

특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 을 만족하는 요소(element)를 선택합니다.
[속성], [속성="값"] 으로 접근

동시 선택

동일한 스타일을 적용하려면 ',' 로 구분해서 작성

/*
ul {color:blue;}
ol {color:blue;}
*/

/* 주석의 내용과 동일하게 작동 */
ul, ol {
	color:blue;
}

결합자(Combinators)

1. 조상 - 자손 결합자
   • 조상에 속한 특정 자손을 모두 선택
   • ex) div div
2. 부모 - 자식 결합자
   • 조상에 속한 직계 자손만을 선택
   • ex) div>div
   • 조상 - 자손 결합자와의 차이점은 조부모-부모-손자 관계일 시, 조상-자손 결합자는 부모,손자를 선택하지만, 부모-자식 결합자는 부모만 선택
3. 인접 형제 결합자
   • 다음 요소1개를 선택
   • 자손은 포함되지 않음
   • ex) div+div
4. 일반 형제 결합자
   • 모든 다음 요소를 선택함
   • 자손은 포함되지 않음
   • ex) div~div

의사 클래스(pseudo class)

의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다.

💡 의사 클래스의 종류에 대해서는 다음 사이트를 참고 하세요.
Pseudo-classes

ex) a:상태

/* a tag의 마우스 커서가 올라간 상태(hover)일때, 색을 녹색으로 바꾼다 */
a:hover {color:green;}

의사 요소(pseudo elements)

선택한 요소의 일부분에만 스타일을 입힐 수 있습니다.

💡 의사 요소의 종류에 대해서는 다음 사이트를 참고 하세요.
Pseudo-elements

ex) a::요소

/* 링크 뒤에 'Test' text를 추가*/
a::after {content:"test";}

.class1.class2.class3 ....

classa명에 class1,class2,class3 가 모두 포함될 때, 선택됩니다.

What is the difference between the selectors “.class.class” and “.class .class”?

마치며

selector를 잘 활용하면 효율적으로 스타일을 적용할 수 있으며, Web scraping 할 때도 유용 할 것으로 생각 됩니다.