[HTML, CSS] CSS Selector

CSS selector

 

개념

HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법

트리 구조로 되어 있는 데이터를 속성과 태그 이름을 통해 빠르게 찾아가는 방법

 

element에 style을 지정하기 위해서 사용할 수 있는 기본 선택자 
 tag
 id
 class

 

tag로 지정하기

span {

     color: red;

}

 

 

id로 지정하기

#spantag {

     color: blue;

}

 

 

class로 지정하기

.spanClass {

     color: green;

}

 

 

선택자와 함께 활용

div.content {

     color: orange;

}

 

 

그룹 선택 
span, div.content {  color : green  }

 

하위 요소 선택 (공백)

* 아래 모든 span태그에 색상이 적용된다.

 

 

자식 선택 ( > )

* 자식은 바로 하위 엘리먼트를 가리킨다.

 

 

n번째 자식 요소를 선택 (nth-child)

 

 

 

 

참고 : boostcourse    https://www.boostcourse.org/web316/lecture/16676?isDesc=false

웹 프로그래밍(풀스택)