[CSS] CSS 고급 선택자

Preface

 

이번 장에선 기존의 선택자 외의 다양한 선택자와 가상 클래스를 공부했다.

 

이런저런 선택자를 사용해보며 CSS는 사용자의 편의를 위한 부분이 제대로 확립되어 있다는 생각을 했다.

 

그러나 그 종류가 너무 다양해서 모든 선택자를 암기하고 사용하는 것은 사실상 어려울 것 같고, 사용 빈도가 높은 선택자를 제외하곤 필요할 때마다 찾아서 사용하는 것이 맞는 것 같다.

 

이번 장에서 배운 내용중에 제일 마음에 드는 선택자는 :hover 가상 클래스 선택자이다.

 

뭐랄까, 마우스 포인터를 가져갔을 때 메뉴의 배경색이 바뀌는 것만으로도 굉장히 세련된 느낌을 주는 것 같다.

---

 

1. 연결 선택자

 

 

- 연결 선택자: 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정한다.

→ 그룹 선택자는 둘 이상의 선택자를 콤마로 구분한다.

 

 

- 하위 요소: 특정 요소를 기준으로 그 안에 포함된 요소

 

 

- 자식 요소: 현재 요소를 기준으로 바로 한 단계 아래 요소

 

 

- 손자 요소: 자식 요소의 한 단계 아래 요소

 

 

- 하위(자손) 선택자:  부모 요소에 포함된 하위 요소를 모두 선택한다.

→ 모든 하위 요소까지 적용되며, 상위 요소와 하위 요소를 공백으로 구분한다.

 

 

- 자식 선택자: 자식 요소에만 스타일을 적용한다.

→ 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분한다.

 

 

- 형제 관계: 부모 요소가 같은 경우

1) 형 요소: 형제 관계인 요소에서 먼저 나오는 요소

2) 동생 요소: 나중에 나오는 요소

 

 

- 인접 형제 선택자: 형제 요소 중에서 첫 번째 동생 요소만 선택한다.

1) 요소1과 요소2 사이에 '+' 기호를 표시한다.

2) 요소1과 요소2는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소2를 선택한다.

 

 

- 형제 선택자: 형제 요소의 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용된다.

→ 요소1과 요소2 사이에 '~' 기호를 표시한다.

 

---

 

2. 속성 선택자

 

 

- [속성] 선택자: 속성값에 따라 원하는 요소를 선택한다.

→ 대괄호([ ]) 사이에 원하는 속성을 입력한다.

a[href] { ... }

 

 

- [속성 = 속성값] 선택자: 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정한다.

→ 대괄호 안에 속성과 속성값을 넣고 그 사이에 '=' 기호를 표시한다.

a[target = _blank] { ... }

 

 

- [속성 ~= 값] 선택자: 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다.

→ 대괄호 안에 속성과 속성값을 넣고 그 사이에 '~=' 기호를 표시한다.

[class ~= button] { ... }

 

 

- [속성 |= 값] 선택자: 특정 속성값이 포함된 속성에 스타일을 적용한다.

→ 대괄호 안에 속성과 속성값을 넣고 그 사이에 '|=' 기호를 표시한다.

1) 속성값은 한 단어로 일치해야 한다.

2) 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택한다.

a[title |= us] { ... }

 

 

- [속성 ^= 값] 선택자: 속성값이 정학하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾아 스타일을 적용한다.

→ 대괄호 안에 속성과 속성값을 넣고 그 사이에 '^=' 기호를 표시한다.

a[title ^= eng] { ... }

 

 

- [속성 $= 값] 선택자: 지정한 속성값으로 끝나는 요소를 선택한다.

→ 대괄호 안에 속성과 속성값을 넣고 그 사이에 '$=' 기호를 표시한다.

[href $= html] { ... }

 

 

- [속성 *= 값] 선택자: 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택한다.

→ 대괄호 안에 속성과 속성값을 넣고 그 사이에 '*=' 기호를 표시한다.

[href *= w3] { ... }

 

---

 

3. 가상 클래스와 가상 요소

 

 

- 가상 클래스: 사용자 동작에 반응하여 스타일을 적용한다.

1) :link 선택자: 방문하지 않은 링크에 스타일을 적용한다.

2) :visited 선택자: 방문한 링크에 스타일을 적용한다.

3) :hover 선택자: 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용한다.

4) :active 선택자: 웹 요소를 활성화했을 때 스타일을 적용한다.

5) :focus 선택자: 웹 요소에 초점이 맞추어졌을 때 스타일을 적용한다.

→ 가상 클래스 선택자는 해당 순서대로 적용해야 한다. (LoVe HAte로 암기)

 

 

- 링크(link): 문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때 사용한다.

 

 

- 앵커(anchor): 같은 문서 안에서 다른 위치로 이동할 때 사용한다.

 

 

- :target 선택자: 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 지정한다.

 

 

- :enabled 선택자: 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정한다.

 

 

- :disabled 선택자: 사용할 수 없는 상태일 때 스타일을 지정한다.

 

 

- :checked 선택자: checked 속성이 있는 요소의 스타일을 적용한다.

→ 라디오 박스나 체크 박스의 선택된 항목에는 자동으로 cheched 속성이 적용된다.

 

 

- :not 선택자: 특정 요소를 제외하고 스타일을 적용한다.

→ 괄호 안에 있는 요소를 제외한다.

#signup input:not([type=radio]) {
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      width: 200px;
}

 

 

- 구조 가상 클래스: 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용한다.

종류	설명
:only-child	부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다.
A:only-type-of	부모 안에 A 요소가 하나뿐일 때 선택한다.
:first-child	부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다.
:last-child	부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다.
A:first-of-type	부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택한다.
A:last-of-type	부모 안에 있는 A 요소 중에서 마지막 요소를 선택한다.
:nth-child(n)	부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다.
:nth-last-child(n)	부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다.
A:nth-of-type(n)	부모 안에 있는 A 요소 중에서 n번째 요소를 선택한다.
A:nth-last-of-type(n)	부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택한다.

 

 

- 위치를 지정할 때 수식을 사용할 수도 있다.

1) :nth-child(odd): 홀수 번째에 스타일을 줄 때 사용

2) :nth-child(even): 짝수 번째에 스타일을 줄 때 사용

 

 

- 가상 요소: 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다.

→ 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않기 위해 사용하며, 이름 앞에 콜론 2개를 붙인다.

 

 

- ::first-line 요소, ::first-letter 요소: 첫 번째 줄, 첫 번째 글자에 스타일을 적용한다.

 

 

- ::before 요소, ::after 요소: 내용 앞뒤에 콘텐츠를 추가한다.