CSS 고급 선택자에 대해 알아보자

 

 안녕하세요. 진득 코딩입니다.

 

 간단한 웹 문서는 기본 선택자만으로도 스타일을 적용할 수 있습니다.

 

 하지만 소스가 길어지면 스타일을 지정할 때 id와 class가 계속 늘어나므로 그 이름을 모두 기억하기는 쉽지 않습니다.

 

 이번 시간에는 연결 선택자와 속성 선택자를 사용하여 소스의 위치나 속성값에 따라 특정 요소를 쉽게 선택하는 방법을 알아보도록 하겠습니다.

 

 연결 선택자

 

• 연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정합니다.
  
  
• 선택자를 둘 이상 조합하므로 '조합 선택자', '콤비네이션 선택자', 또는 '콤비네이션 셀렉터' 등으로도 부릅니다.
  
  

하위 선택자

 

• 하위 선택자(descendant selector)를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 합니다.
• 즉, 자식 요소뿐만 아니라 손자요소, 손자의 손자 요소 등 모든 하위 요소까지 적용됩니다.
  
  
• 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분합니다.
  
  

 상위요소 하위요소

 

• 예를 들어 section 요소 안에 포함된 p 요소를 모두 선택하려면 section과 p 사이에 공백 한 칸을 두고 나란히 써줍니다.
  
  
• 그리고 중괄호 안에 스타일 규칙을 써줍니다.
  
  

 section p { ... }

 

자식 선택자

 

•  자식 선택자(child selector)는 자식 요소에만 스타일을 적용하는 선택자입니다.
  
  
•  두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분합니다.

 부모요소 > 자식요소

 

• 하위 선택자에서는 자식 요소뿐만 아니라 자식의 자식, 즉 손자 요소까지 적용되지만, 자식 선택자에서는 바로 한 단계 아래의 요소, 즉 자식 요소에만 스타일이 적용됩니다.
  
  

웹 문서에서의 형제 관계

 

• 웹 문서에서 부모 요소가 같은 경우 형제 관계라고 표현합니다.
  
  
• 형제 관계인 요소에서 먼저 나오는 요소를 형요소, 나중에 나오는 요소를 동생 요소라고 합니다.
  
  

인접 형제 선택자

 

• 인접 형제 선택자(adjacent selector)는 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 의미합니다.
  
  
• 인접 형제 선택자를 정의할 때는 요소1과 요소2 사이에 '+' 기호를 표시합니다.
  
  
• 요소1과 요소2는 같은 레벨이면서 요소1 이후 가장 먼저 오는 요소2를 선택합니다.
  
  

 요소1 + 요소2

 

형제 선택자

 

• 형제 선택자(sibling selector)는 형제 요소의 스타일을 정의하는데 인접 형제 선택자와 달리 모든 형제 요소에 적용됩니다.
  
  
• 형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시합니다.
  
  

 요소1 ~ 요소2

 

 예시)

 h1 ~ p { color: blue; }

 

속성 선택자

 

• 속성 선택자는 태그 안에서 사용하는 속성값에 따라 요소를 선택하는 역할을 합니다.
  
  
• 속성 값의 조건에 따라 특정 부분만 선택하기 쉬우므로 상황에 맞는 스타일을 지정하기도 쉽습니다.
  
  

[속성] 선택자

 

• [속성] 선택자를 이용하여 속성값에 따라 원하는 요소를 선택할 수 있습니다.
  
  
• 대괄호([ ]) 사이에 원하는 속성을 입력하면 됩니다.
  
  
• 예를 들어 a 요소 중에서 href 속성이 있는 요소를 선택하려면 아래 예시대로 작성합니다.
  
  

 a[href] { ... }

 

[속성 = 속성값 ] 선택자

 

• [ 속성 = 속성값 ] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용합니다.
  
  
• [ 속성 = 속성값 ] 선택자는 대괄호 ([ ]) 안에 속성과 속성값을 넣고 그 사이에 '=' 기호를 표시합니다.
  
  
• 예를 들어 a 요소 중에서 target 속성값이 '_blank'인 것만 선택하고 싶다면 다음과 같이 작성합니다.
  
  

 a [target = _blank] { ... }

 

[속성 ~= 값] 선택자

 

• [속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택합니다.
  
  
• [속성 ~= 값] 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리합니다.
  
• 예를 들어 하나의 요소에 클래스 스타일을 여러 개 적용할 수 있는데, 그중에 button 스타일이 있는 요소를 찾으려면 다음과 같이 작성합니다.
  

 [class ~= button] { ... }

 

• 여기서 주의할 점은 [ 속성 ~= 값 ] 선택자는 button 값과 정확하게 일치하는 요소를 선택한다는 점입니다.
  
  
• 만약 flat-button이나 buttons처럼 button 외에 다른 글자가 속성값에 포함되어 있으면 선택하지 않습니다.
  
  

[속성 ¦= 값] 선택자

 

• [속성 ¦= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용합니다.
  
  
• 이때 속성값은 한 단어로 일치해야 합니다.
  
  
• [속성 ~= 값]은 하이픈( - )으로 연결한 단어에 스타일을 적용하지 않는다는 점에서 [속성 ¦= 값] 선택자와 차이가 있습니다.
  
  
• 즉, [속성 ¦= 값] 선택자는 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈( - )으로 연결된 단어도 선택합니다.
  
  
• '¦' 기호는 'shift'와 '\'를 함께 누르면 쓸 수 있습니다.
  
  

[속성 ^= 값] 선택자

 

• [속성 ^= 값] 선택자를 사용하여 지정한 속성값으로 시작하는 요소를 찾을 수 있습니다.
  
  
• 예를 들어 title 속성값이 eng로 시작하는 a 요소를 찾는다면 다음과 같이 작성합니다.
  
  

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

 

[속성 $= 값] 선택자

 

• [속성 $= 값] 선택자는 지정한 속성값으로 끝나는 요소를 선택합니다.
  
  
• 예를 들어 링크한 파일 이름의 마지막 단어가 xls인 요소를 찾는다면 다음과 같이 작성합니다.
  
  

 [href $= xls] { ... }

 

[속성 *= 값] 선택자

 

• [속성 *= 값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택합니다.
  
  
• 예를 들어 href 속성값 중에 'w3'가 포함된 요소를 선택한다면 다음과 같이 작성합니다.
  
  

 [href *= w3] { ... }

 

속성 선택자 정리

 

 지금까지 배운 속성 선택자를 표로 정리해 두도록 하겠습니다.

종류	선택 요소	예시
[속성]	해당 속성이 있는 요소	[required]
[속성 = 값]	지정한 속성값이 있는 요소	[target = _blank]
[속성 ~= 값]	지정한 속성값이 포함된 요소 (단어별)	[class ~= button]
[속성 |= 값]	지정한 속성값이 포함된 요소 (하이픈 포함, 단어별)	[title ¦= us]
[속성 ^= 값]	지정한 속성값으로 시작하는 요소	[title ^= eng]
[속성 $= 값]	지정한 속성값으로 끝나는 요소	[href $= xls]
[속성 *= 값]	지정한 속성값의 일부가 일치하는 요소	[href *= w3]

 

가상 클래스와 가상 요소

 

• 메뉴의 몇 번째 항목을 지정하거나, 단락의 첫 번째 글자만 지정할 경우에 사용할 수 있습니다.
  
  
• 가상 클래스는 클래스 이름 앞에 콜론(:)을 1개만 붙여 표시합니다.
  
  
• 가상 요소는 콜론(:)을 2개 붙여 표시합니다.
  
  

가상 클래스

 

• 가상 클래스 선택자는 사용자 동작에 반응하는 클래스입니다.
  
  
• 예를 들어 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들 수 있습니다.
  
  
• 자주 사용하는 가상 클래스 선택자는 다음과 같습니다.
  
  

1. :link 가상 클래스 선택자
   
   - 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다.
   
   
2. :visited 가상 클래스 선택자
   
   - 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용합니다.
   
   
3. :hover 가상 클래스 선택자
   
   - 웹 요소 위로 마우스 포인터를 올려놓을 때 스타일을 적용합니다.
   
   
4. :active 가상 클래스 선택자
   
   - 웹 요소의 링크나 이미지 등을 활성화했을 때, 즉 클릭했을 때 스타일을 지정합니다.
   
   
5. :focus 가상 클래스 선택자
   
   - 웹 요소에 초점이 맞춰졌을 때 스타일을 적용합니다.
   
   - 예를 들어 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서 tab을 눌러 입력 커서를 이동했을 때 스타일을 지정합니다.
   
   - 여기서는 focus를 초점이라고 했지만, 주로 '포커스'라는 용어를 사용합니다.

• 지금까지 설명한 1 ~ 4의 가상 클래스 선택자는 메뉴 링크에서 자주 사용하는데, 이때 다음과 같은 순서로 정의해야 합니다.
  
  

 1) : link 2) :visited 3) :hover 4) :active

 

• 이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않습니다.
  
  
• LoVe HAte로 외우면 쉽게 외울 수 있습니다.
  
  

요소 상태에 따른 가상 클래스

 

 웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 수 있는데, 이때 가상 클래스 선택자를 사용합니다.

1. :target 가상 클래스 선택자
   
   - 문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때에는 앵커(anchor)를 이용합니다.
   
   - :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있습니다.
   
   
2. :enabled와 :disabled 가상 클래스 선택자
   
   - :enabled 선택자를 사용하여 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정할 수 있습니다.
   
   - :disabled 선택자를 사용하여 사용할 수 없는 상태일 때 스타일을 지정할 수 있습니다.
   
   
3. :checked 가상 클래스 선택자
   
   - 폼의 라디오 박스나 체크 박스에서 선택된 항목에는 'checked'라는 속성이 추가됩니다.
   
   - :checked 선택자를 사용하면 checked 속성이 있는 요소의 스타일을 지정할 때 편리합니다.
   
   
4. :not 가상 클래스 선택자
   
   - :not 선택자는 부정의 의미가 있습니다.
   
   - not은 '괄호 안에 있는 요소를 제외한'이라는 의미입니다.
   
   - 따라서 :not 가상 클래스 선택자를 사용하여 특정 요소를 제외하고 스타일을 적용할 수 있습니다.
   
   

구조 가상 클래스

 

• 구조 가상 클래스란 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자입니다.
  
  

특정 위치의 자식 요소 선택하기

 

• 웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class나 id 선택자를 사용합니다.
  
  
• 하지만 요소가 여러 개 나열되어 있는 경우에는 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있습니다.
  
  
• 다음 표에 구조 가상 클래스 선택자의 종류를 정리해 보았습니다.
  
  

종류	설명
: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, 3. 5번째처럼 위치가 계속 바뀐다면 반복된 규칙을 찾아내서 an+b처럼 수식을 사용할 수도 있습니다.
  
  
• 이때 n값은 0부터 시작합니다.
  
  
• 홀수 번째에 스타일을 줄 때는 :nth-child(odd), 짝수 번째에 스타일을 줄 때는 :nth-child(even)을 사용할 수 있습니다.
  
  

가상 요소

 

• 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가합니다.
  
  
• 가상 요소를 만들어 사용하는 이유는 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위함입니다.
  
  
• 가상 요소는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개(::)를 붙여서 표시합니다.
  
  
• 자주 사용하는 가상 요소를 살펴보도록 하겠습니다.
  
  

1. ::first-line' 요소와 'first-letter' 요소
   
   - ::first-line 요소와 ::first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있습니다.
   
   - ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데, 첫 번째 글자는 반드시 첫 번째 줄에 있어야 합니다.
   
   
2. ::before 요소와 ::after 요소
   
   - ::before 요소와 ::after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있습니다.
   
   - 두 요소를 사용해 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있습니다.
   
   

---

 

 이번 시간에는 CSS 고급 선택자에 대해 알아보았습니다.

 

 웹 문서가 복잡해질수록 class와 id를 모두 기억하거나 구분하기 어렵기 때문에 프로젝트 전에 알고 있으면 유용하게 사용할 수 있을 거라고 생각합니다.

 모두 외우고 있다가 사용할 필요는 없고 한 번 읽어보고 이런 기능이 있구나 정도만 기억하고 있다가 필요할 때마다 검색해서 사용하시는 것을 추천합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항이 있다면 댓글을 남겨주시면 성심껏 답글 달아드리도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊