비주얼스튜디오 코드(Visual Studio Code)의 SELECTOR(선택자)

※HTML의 요소들의 스타일을 제어할 수 있는 CSS를 사용하려면 HTML의 원하는 요소와 범위를 정확하게 선택할 수 있어야 합니다.

CSS문법에서는 원하는 요소를 선택할 수 있도록 다양한 방법을 제공하고 있는데 이를 SELECTOR(선택자)라고 합니다.

크게 4개의 분류로 나누어 구분할 수 있습니다.

• 기본 선택자(Basic selectors) - 기본적인 선택자의 표현
• 그룹 선택자(Grouping selectors) - 다수의 요소를 선택하는 선택자의 표현
• 결합 선택자(Combinator selectors) - 요소와 인접하는 형제 또는 자식 요소들을 선택하는 선택자의 표현
• 의사 클래스 또는 의사 요소 (Pseudo classes or Pseudo elements)

목차

1. 선택자의 우선순위

2. 기본 선택자와 그룹 선택자

3. 결합 선택자와 속성 선택자

 

1. 선택자의 우선순위

1. 같거나 서로 다른 선택자 방식으로 동일 요소에게 동일 속성을 뒤쪽에서 다른 값으로 재정의할 수 있다.
2. 서로 나누어진 CSS 코드인 경우 HTML 문서에 적용되는 순서에 따라 뒤쪽에서 동일 요소에게 동일 속성을 재정의 할 수 있다.
3. 선택자의 종류에 따른 우선순위 규칙(1항보다 우선)
   • 주요 단일 선택자 방식에서 id, class, tag 순의 우선순위
   • 우선순위 규칙에 의해 경우에 따라 뒤쪽에서 동일 속성을 재정의 할 수 없다.
4. 결합 관계(복합 선택자 패턴)의 경우는 결합되는 선택자 방식의 정해진 점수를 합산하여 우선순위를 정한다.
5. ! important를 사용해서 가장 우선적으로 적용이 가능하다.

 

@선택자 방식적용 선택자 우선순위

!important	속성: 적용 값 !important;	속성 기준 가장 우선	속성 기준 가장 우선	속성 기준 가장 우선
인라인 스타일	style=””	1	요소 기준 가장 우선	요소 기준 가장 우선
ID 선택자	#selector	2	100	#header > .logo > a {  }
CLASS 선택자	.selector	3	10
속성 기반 선택자	a[href*=”#”]	3	10
가상 클래스	a:hover	3	10
가상 요소	span::after	3	10
태그 선택자	a	4	1
전체 선택자	*	5	0

 

2. 기본 선택자와 그룹 선택자

 

@선택자 종류

태그 선택자	p {}	기본 태그를 선택합니다.
클래스 선택자	.class {}	클래스 태그를 선택합니다.
아이디 선택자	#id {}	아이디 태그를 선택합니다.
그룹 선택자	p, .class, #id {}	여러가지 태그를 선택합니다.
전체 선택자	* {}	전체 태그를 선택합니다.

 

@코드로 보기  

      * {

            margin: 0;

            padding: 0;

        }

        p {

            color: black;

            font-size: 40px;

        }

 

        p, h1, h2 {

            color: black;

            font-size: 40px;

        }

        #id {

            color: black;

            font-size: 40px;

        }

 

 

3. 결합 선택자와 속성 선택자

 

@결합 선택자

자식 결합자	a > b	a의 직계 자식인 노드를 선택
자손 결합자	a b	a의 자손인 노드를 선택
일반 형제 결합자	a ~ b	a와 b의 부모가 같고, a뒤에 오는 모든 b를 선택
인접 형제 결합자	a + b	a와 b의 부모가 같고, a 바로 뒤에 오는 b만 선택

 

@속성 선택자

[attribute="value"]	해당 속성을 가지며, 그 값이 value인 요소를 선택합니다.
[attribute~="value"]	해당 속성을 갖고, 그 값중에 value가 포함되는 요소를 선택합니다.
[attribute|="value"]	해당 속성을 갖고, 그 값이 value이거나 value-로 시작하는 요소를 선택합니다.
[attribute^="value"]	해당 속성을 갖고, 그 값이 value로 시작하는 요소를 선택합니다. 위의 속성 선택자와 차이점은 value-로 시작하는게아니라, value로 시작한다는 점입니다.
[attribute$="value"]	해당 속성을 갖고, 그 값이 value로 끝나는 요소를 선택합니다.
[attribute*="value"]	해당 속성을 갖고, 그 값이 value를 포함하기만 하면 모두 선택합니다.