[TIL] CSS의 선택자

1. CSS 선택자

◎ 속성과 값을 지정할 대상을 검색하여 html에서 원하는 태그를 찾아주는 역할.

※선택자를 잘 못 다루면 css 적용하기가 힘들다.

 

2. 선택자의 종류

• 기본 선택자(Basic Selectors)

• 복합 선택자(Combinators Selectors)

• 가상 클래스 선택자(Pseudo-Classes Selectors)

• 가상 요소 선택자(Pseudo-Elements Selectors)

3. 기본 선택자(Basic Selectors)

• 전체 선택자(Universal Selector)

• 태그 선택자(Type Selector)

• 클래스 선택자(Class Selector)

• 아이디 선택자(Id Selector)

3-1. 전체 선택자(Universal Selector)

 

• 모든 요소를 선택

• * 기호를 사용

• 전체를 선택하기 때문에 활용도가 떨어진다.

전체 선택자 css

전체 선택자 html

3-2. 태그 선택자(Type Selector)

 

• 태그 이름으로 선택

• 특정 기호가 없다.

• 태그 선택자 단독으로만 사용될 경우 활용도가 떨어진다.

태그 선택자 css

태그 선택자 html

3-3. 클래스 선택자(Class Selector)

.E

• HTML 문서의 class 속성의 값이 E인 요소를 선택

• . 기호를 사용

• 다양한 곳에 동일하게 사용할 수 있다.

클래스 선택자 css

클래스 선택자 html

3-4. 아이디 선택자(Id Selector)

#E

• HTML 문서의 id 속성의 값이 E인 요소 선택

• # 기호를 사용
• 고유하게 사용해야 한다.
• 클래스 선택자보다 적게 사용된다.

아이디 선택자 css

아이디 선택자 html

4. 복합 선택자(Combinators Selector)

• 일치 선택자(Basic Combinator)

• 자식 선택자(Child Combinator)

• 후손(하위) 선택자(Descendant Combinator)

• 인접 형제 선택자(Adjacent Sibling Combinator)

• 일반 형제 선택자(General Sibling Combinator)

4-1. 일치 선택자(Basic Combinator)

EF

• E와 F를 동시에 만족하는 요소 선택

일치 선택자 css

일치 선택자 html

4-2. 자식 선택자(Child Combinator)

E > F

• E의 자식 요소 F를 선택

• > 기호를 사용

• F가 검색이고 > 앞에 E를 조건이라고 생각하면 된다.

자식 선택자 css

자식 선택자 html

4-3. 후손(하위) 선택자(Descendant Combinator)

E F

• E의 하위 요소 F를 선택

• 띄어쓰기를 사용

하위 선택자 css

하위 선택자 html

4-4. 인접 형제 선택자(Adjacent Sibling Combinator)

E + F

• E의 다음 형제 요소 F 하나만 선택

• + 기호를 사용

인접 형제 선택자 css

인접 형제 선택자 html

4-5. 일반 형제 선택자(General Sibling Combinator)

E ~ F

• E의 다음 형제 요소 F 모두 선택

• ~ 기호를 사용

일반 형제 선택자 css

일반 형제 선택자 html

5. 가상 클래스 선택자(Pseudo-Classes Selectors)

E:hover{}
E:active{}
E:focus{}

• 어떤 동작을 수행했을 때 변화하게 하는 선택자

• 요소 앞에 :(클론) 기호가 한 개 붙어있다.

• hover, active, focus 등이 있다. (각자의 역할이 다르기 때문에 사용하면서 의미를 파악하자.)

6. 가상 요소 선택자(Pseudo-Elements Selectors)

E::before{ content: " "}
E::after{ content: " "}

• css를 통해서 html에 가상의 요소를 생성해서 제공하는 선택자

• 요소 앞에 ::(콜론) 기호가 두 개가 붙어있다.

• 콜론을 하나만 작성해도 되지만 가상 클래스 선택자 개념과 가상 요소 선택자 개념을 분리하기 위해 두 개를 작성하는 것이 표준이다.

• 대표적으로 before, after 등이 있다.(각자의 역할이 다르기 때문에 사용하면서 의미를 파악하자.)

• 무조건 content 속성이 있어야 한다.

• 텍스트뿐만 아니라 이미지 등을 삽입할 수 있다.