[CSS] CSS 고급 선택자

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱 

 

CH10. CSS 고급 선택자

10-1. 연결 선택자

1) 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

 

1-1) 하위 선택자

- 하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택한다. (자식, 손자 요소 등 모든 하위 요소 포함) 

// 기본형
상위요소 하위요소

 

- section 요소 안에 포함된 p 요소를 모두 선택하려면 section과 p 사이에 공백 한 칸을 두고 나란히 써준다. 

section p {....}

...
  section p { color = blue; } 
</style>

<section>
  <h1>예약 방법 & 사용 요금</h1>
  <p>내용</p>  /* section의 모든 하위 p 요소에 적용 */
  <div>
    <p>내용1</p> /* section의 모든 하위 p 요소에 적용 */
    <p>내용2</p> /* section의 모든 하위 p 요소에 적용 */
  </div>
</section>

 

1-2) 자식 선택자 

- 자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자이다.

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

//기본형
부모요소 > 자식요소

- 다음과 같이 section 요소에 포함된 p요소 중에서 자식 요소만 선택하려면 section과 p 사이에 자식 선택자 기호인 '>'를 넣는다.

...
  section > p { color = blue; } 
</style>

<section>
  <h1>예약 방법 & 사용 요금</h1>
  <p>내용</p>  /* section 요소의 자식인 p 요소에만 스타일 적용 */
  <div>
    <p>내용1</p> 
    <p>내용2</p> 
  </div>
</section>

 

 

2) 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 

- 웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.

 

2-1) 인접 형제 선택자 

- 형제 요소 중에서 첫 번째 동생 요소만 선ㄴ택하는 것을 인접 형제 선택자라고 한다. 

- 인접 형제 선택자를 정의할 때는 다음 기본형과 같이 요소1과 요소2 사이에 '+' 기호를 표시한다. 

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

//기본형
요소1 + 요소2

- 예를 들어 h1 요소와 형제인 p 요소 중에서 첫 번째 p 요소만 선택하여 글자색으로 파란색으로 적용하려면 다음과 같이 사용한다.

h1 + p { color: blue; }

...
h1 + p {
  background-color: #222;
  color: #fff;
}
</style>
...
  <h1>예약 방법 & 이용 요금</h1> 
  <p>내용1</p> /* h1 요소의 형제 요소 중에서 첫 번째 형제인 p요소에 적용 */
  <p>내용2</p>
...

 

2-2) 형제 선택자 

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

- 형제 선택자를 정의할 때는 첫 번째 요소와 두 번째 요소 사이에 '~' 기호를 표시한다. 요소1과 형제인 요소2를 모두 선택하는 것이다.

요소1 ~ 요소2

- 예를 들어 h1 요소 뒤에 오는 모든 형제 p 요소의 글자에 파란색을 적용하려면 코드를 다음과 같이 작성한다.

h1 ~ p { color: blue; }

...
h1 ~ p {
  background-color: #222;
  color: #fff;
}
</style>
...
  <h1>예약 방법 & 이용 요금</h1> 
  <p>내용1</p> /* h1 요소의 형제인 p 요소에 모두 적용 */
  <p>내용2</p> /* h1 요소의 형제인 p 요소에 모두 적용 */
...

 

10-2. 속성 선택자

 

1) 특정 속성이 있는 요소를 선택하는 [속성] 선택자 

- 예를 들어 a 요소 중에서 href 속성이 있는 요소를 선택하려면 다음과 같이 작성한다. 

a [href] {...}

...
a [href] {
  background: yellow;
  border: 10px solid #ccc;
  font-weight normal;
}
</style>

<ul>
  <li><a>메인 메뉴 : </a></li>
  <li><a href="#">메뉴 1</a></li>   /* a 요소 중에서 href 속성값이 있는 요소만 적용 */
  <li><a href="#">메뉴 2</a></li>   /* a 요소 중에서 href 속성값이 있는 요소만 적용 */
  <li><a href="#">메뉴 3</a></li>   /* a 요소 중에서 href 속성값이 있는 요소만 적용 */
  <li><a href="#">메뉴 4</a></li>   /* a 요소 중에서 href 속성값이 있는 요소만 적용 */
  <li><a href="#">메뉴 5</a></li>   /* a 요소 중에서 href 속성값이 있는 요소만 적용 */
</ul>
...

 

2) 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자

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

- 예를 들어 a 요소 중에서 target 속성값이 '_blank'인 것만 선택하고 싶다면 다음과 같이 작성한다.

a [target = _blank] {...}

...
a [target = _blank] {
  padding-right: 30px;
  background: url(images/newwindow.png) no-repeat center right; 
}
</style>
...
<ul>
  <li><a href="#" target="_blank">HTML</a></li> /* a 요소 중에서 target 속성값이 _blank인 요소에만 적용 */
  <li><a href="#">CSS</a></li>
  <li><a href="#">JAVA</a></li>
</ul>

 

3) 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자 

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

- 이 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리하다.

- 예를 들어 하나의 요소에 클래스 스타일을 여러 개 적용할 수 있는데, 그중에 button 스타일이 있는 요소를 찾으려면 다음과 같이 작성한다.

[class ~= button]{...}

- 여기서 주의할 점은, button이라는 속성값과 정확하게 일치하는 요소만 선택한다는 것이다. flat-button이나 buttons처럼 속성값 일부에 button이 포함되어 있을 경우에는 선택하지 않는다. 

...
[class ~= button] {
  box-shadow: rgba(0,0,0,0.4) 4px 4px;
  border-radius; 5px;
}
</style>
<ul>
  <li><a href="#" class="flat">메뉴1</a></li>
  <li><a href="#" class="flat">메뉴2</a></li>
  <li><a href="#" class="button">메뉴3</a></li> /* class "button"인 메뉴3에만 스타일 적용 */ 
  <li><a href="#" class="flat-button">메뉴4</a></li>
</ul>

 

4) 특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자 

- [속성 |= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용한다. 이때 속성값은 한 단어로 일치해야한다. 

- 앞에서 다룬 [속성 ~= 값] 선택자와 비슷해 보이지만, [속성 ~= 값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않는다는 점에서 [속성 |= 값] 선택자와 차이가 있다.

- 즉, [속성 |= 값] 선택자는 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택한다.

- 예를 들어 title 속성값에 us가 있거나 us-로 연결된 속성값이 있는 a 요소를 찾는다면 다음과 같이 작성한다.

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

...
a [title |= us] {
  background: url(images/us.png) no-repeat left center;
}

a [title |= jap] {
  background: url(images/jap.png) no-repeat left center;
}

a [title |= chn] {
  background: url(images/chn.png) no-repeat left center;
}
</style>
...
<ul>
  <li>외국어 서비스: </li>
  <li><a href="#" title="us-english">영어</a></li> /*속성값이 us-로 시작하는 단어이므로 스타일 적용됨 */
  <li><a href="#" title="ja">일본어</a></li> /*속성값이 jap도 jap-도 아니므로 스타일 적용 안됨 */
  <li><a href="#" title="chn">중국어</a></li> /*속성값이 chn과 일치하므로 스타일 적용됨 */
</ul>

 

5) 특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값] 선택자

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

- 예를 들어 title 속성값이 eng로 시작하는 a 요소를 찾는다면 다음과 같이 작성한다.

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

 - a [title ^= eng] 로 지정하면 속성값이 'eng' 뿐만 아니라 'english'인 요소도 선택할 수 있다.

...
a [title ^= "eng"] {
  background: url(images/us.png) no-repeat left center;
  padding: 5px 25px;
}

a [title ^= "jap"] {
  background: url(images/jap.png) no-repeat left center;
  paddng: 5px 25px; 
}

a [title ^= "chin"] {
  background: url(images/chn.png) no-repeat left center;
  padding: 5px 25px;
}
</style>
...
<ul>
  <li>외국어 서비스: </li>
  <li><a href="#" title="english">영어</a></li> /*속성값이 eng로 시작하므로 스타일 적용됨 */
  <li><a href="#" title="japanese">일본어</a></li> /*속성값이 jap으로 시작하므로 스타일 적용됨 */
  <li><a href="#" title="chinese">중국어</a></li> /*속성값이 chin으로 시작하므로 스타일 적용됨 */
</ul>

 

6) 특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자 

- [속성 ^= 값]이 지정한 속성값으로 시작하는 요소를 선택했다면, [속성 $= 값] 선택자는 지정한 속성값으로 끝나는 요소를 선택한다.

- 예를 들어 링크한 파일 이름의 마지막 단어가 xls인 요소를 찾는다면 다음과 같이 작성한다.

[href $= xls] {...}

- 아래 예제는 [속성 $= 값] 선택자를 사용해 href에 링크된 파일의 확장자, 즉 파일의 이름 마지막 속성값을 체크한 후 파일 형식에 맞는 아이콘을 파일 이름옆에 표시한다. 

...
a [href $= hwp] {
  background: url(images/hwp_icon.gif) center right no-repeat;
  padding-right: 25px;
}

a [href $= xls] {
  background: url(images/xls_icon.gif) center right no-repeat;
  padding-right: 25px;
}
</style>
...
<h3>회사 소개 파일 내려 받기</h3>
<ul>
  <li><a href="intro.hwp">hwp 파일</a></li>
  <li><a href="intro.xls">xls 파일</a></li> 
</ul>

 

7) 일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자

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

- 예를 들어 href 속성값 중에 'w3'이 포함된 요소를 선택한다면 다음과 같이 작성한다. 

[href *= w3] {...}

- 아래는 여러 링크 중에서 w3c 사이트로 연결하는 링크를 찾아 배경색과 글자색을 바꾸는 예제이다. 

...
a [href *= w3] {
  background: blue;
  color: white;
}
</style>
...
<p>아래 링크 중에서 배경색이 파란색인 링크는 w3c 사이트로 연결됩니다.</p>
<ul>
  <li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li> 
  <li><a href="#">내용</a></li>
</ul>
...

 

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

1) 사용자 동작에 반응하는 가상 클래스 

- 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용하면 된다.

* 아래 1-1)~1-4) 의 가상 클래스 선택자는 메뉴 링크에서 자주 사용하는데, 이 때 다음과 같은 순서로 정의해야한다. 이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않는다.

* :link -> :visited -> :hover -> :active 

 

1-1) 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자'

- 웹 문서의 링크 중 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.

- 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다. 이때 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자를 사용한다. 

 

1-2) 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자'

- 웹 문서의 링크 중에서 한 번 이상 방문한 링크에 스타일을 적용한다.

- 한 번 이상 방문한 텍스트 링크는 보라색이 기본값이다. 이때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용해 조절한다.

 

1-3) 특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ':hover 가상 클래스 선택자'

- :hover 선택자는 웹 요소 위로 마우스 포인터를 올려놓을때 스타일을 적용한다.

- 즉, 이 가상 클래스 선택자를 응용하면 이미지 위로 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌거나, 메인 메뉴 위로 마우스 포인터를 올려놓았을 때 서브메뉴가 나타나는 효과를 만들 수 있다. 

 

1-4) 웹 요소를 활성화했을 때 스타일을 적용하는 ':active 가상 클래스 선택자'

- :active 선택자는 웹 요소의 링크나 이미지 등을 활성화 했을 때, 즉 클릭했을 때 스타일을 지정한다.

- 예를 들어 어떤 웹 요소의 링크를 클릭하는 순간의 스타일을 지정할 수 있다.

 

1-5) 웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ':focus 가상 클래스 선택자'

- :focus 선택자는 웹 요소에 포커스가 맞추어졌을 때 스타일을 적용한다.

- 예를 들어 텍스트 필드 안에 마우스 포인터를 올려놓거나, 웹 문서에서 tab을 눌러 입력 커서를 이동했을 때 스타일을 지정한다.

 

- 아래 예제는 가상 클래스 선택자를 사용해서 메뉴의 텍스트를 상황에 따라 다르게 표현하는 예제이다. 

- 먼저 링크 (a:link) 와 방문했던 링크의 텍스트(a:visited)는 밑줄을 없앤다. 

- 그리고 링크 위로 마우스 포인터를 올려놓으면(a:hover) 짙은 회색 배경에 흰색 글자로 바뀌고, 클릭하는 순간(a:active) 배경이 빨간색으로 바뀐다. 

...
.navi ul li {
  float: left;
  width: 150px;
  padding: 10px;
}

.navi a:link, .navi a:visited { /* 방문하지 않은 링크와 방문한 링크 설정 */ 
  display: block;
  font-size: 14px;
  color: #000;
  padding: 10px;
  text-decoration: none; /* 밑줄을 없앤다.*/ 
  text-align: center; 
}

.navi a:hover, .navi a:focus { /* 마우스 포인터를 올렸을 때와 초점을 맞췄을 때 설정 */ 
  background-color: #222 /*배경색을 짙은 회색으로 변경*/
  color: #fff;
}

.navi a:active { /* 마우스 포인터로 클릭했을 때 지정 */
  background-color: #f00;
}
</style>
...
  <nav class="navi">
    <ul>
      <li><a href="#">이용 안내</a></li>
      <li><a href="#">객실 소개</a></li>
      <li><a href="#">예약 방법 및 요금</a></li>
      <li><a href="#">예약하기</a></li>
    </ul>
 </nav> 
...

 

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

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

 

2-1) 앵커 대상에 스타일을 적용하는 ':target 가상 클래스 선택자' 

- 문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때에는 링크를 이용하고, 같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 이용한다. 

* '앵커'는 페이지가 긴 웹 문서에서 특정 요소를 클릭하면 그 위치로 한번에 이동하도록 도와주는 기능이다.  

- 이때 :target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있다. 

...
#intro:target {
    background-color:#0069e0;  /* 배경색 - 파란색 */
    color:#fff;  /* 글자색 - 흰색 */
  }
  #room:target {
    background-color:#ff9844;  /* 배경색 - 주황색 */
  }
  #reservation:target{
    background-color:#fff8dc;  /* 배경색 - 베이지색 */
  }
</style>
</head>

<body>
<div class="container">
    <nav class="navi">
      <ul>
        <li><a href="#intro">이용 안내</a></li>
        <li><a href="#room">객실 소개</a></li>
        <li><a href="#reservation">예약 방법 및 요금</a></li>
...

2-2) 요소의 사용 여부에 따라 스타일을 적용하는 ':enabled와 :disabled 가상 클래스 선택자'

- 해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 반대로 사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 사용한다.

- 예를 들어 텍스트 영역 필드 (textarea)를 사용해 회원 약관을 보여줄 때는 사용자가 입력할 수 없도록 disabled 속성을 지정해야한다. 이때 :disabled 선택자를 사용하면 이런 텍스트 영역 필드의 스타일을 쉽게 적용할 수 있다. 

 

2-3) 선택한 항목의 스타일을 적용하는 ':checked 가상 클래스 선택자' 

- 폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가된다. 이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리하다. 

- 예를 들어 라디오 버튼을 클릭했을 때 레이블을 빨간색 굵은 글자로 바꾸려면 다음과 같이 입력한다. 여기에서는 <input>과 <label> 태그가 형제 관계이므로 + 선택자를 사용한다. 

...
#signup input:checked + label{ /* input 요소에 checked 속성이 추가되었을 때 label요소의 스타일 
  color: red;
  font-weight: bold;
} 
</style>
...
<ul>
 <li>
   <input type="radio" name="room" id="basic">
   <label for="basic">기본형(최대 2인)</label>
 <li>      
 <li>
   <input type="radio" name="room" id="family">
   <label for="family">가족형(최대 8인)</label>
 </li>          
</ul>

2-4) 특정 요소를 제외하고 스타일을 적용하는 ':not 가상 클래스 선택자' 

- :not 선택자는 이름에서도 알 수 있듯이 부정의 의미가 있다. 여기서 not은 '괄호 안에 있는 요소를 제외한' 이라는 의미이다. 

- 스타일을 적용하려고 하는 필드를 나열하는 것보다 적용하지 않는 필드가 더 적을 때 :not 선택자를 사용하는 것이 편리하다. 

 /*<input> 태그의 type 속성값이 text인 것과 tel인 것을 찾아서 스타일 규칙을 지정한다. */
  #signup input[type=text], input[type=tel] { 
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      width: 200px;
    }

/* <input> 태그의 type이 raido가 아닌 것을 찾아 스타일 규칙을 지정한다. */ 
 #signup input:not([type=radio]) {
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 5px;
      width: 200px;
    }

 

3) 구조 가상 클래스 

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

 

3-1) 특정 위치의 자식 요소 선택하기 

웹 문서에서 특정 요소에 스타일을 적용하려면 보통 class나 id 선택자를 사용한다. 하지만 요소가 여러 개 나열되어 있는 경우 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있다. 

 

3-2) 수식을 사용해 위치 지정하기 

- 위치를 지정할 때 :nth-child(n) 선택자처럼 위치를 정확히 알려줄 수도 있지만 1,3,5번째처럼 위치가 계속 바뀐다면 반복된 규칙을 찾아서 an+b처럼 수식을 사용할 수도 있다. 이때 n값은 0부터 시작한다. 

 

4) 가상 요소 

- 가상 클래스가 웹 문서의 여러 요소 중에서 원하는 요소를 선택한다면, 가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가한다. 

- 가상 요소를 만들어 사용하는 이유는 특별히 화면에 보이는 부분을 꾸밀 때 불필요한 태그를 사용하지 않도록 하기 위한 것이다.

- 가상 요소는 가상 클래스와 구별하도록 가상 요소 이름 앞에 콜론 2개(::)를 붙여서 표시한다.

- 다음은 자주 사용하는 가상 요소이다.

 

4-1) 첫번째 줄, 첫 번째 글자에 스타일을 적용하는 '::first-line 요소, ::first-letter 요소'

- ::first-line 요소와 ::first-letter 요소를 사용하면 지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있다. 

- ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데, 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다. 

- 만약 <p> 태그 안에 <br> 태그가 있어 첫 번째 글자가 첫 번째 줄에 없으면 적용할 수 없다. 

 

4-2) 내용 앞뒤에 콘텐츠를 추가하는 '::before 요소, ::after요소' 

- ::before 요소와 ::after 요소를 사용하면 지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있다.

- 이 요소를 사용하면 요소의 앞 뒤에 텍스트나 이미지 등을 추가할 수 있다. 

- 아래 예제는 ::after 요소를 사용해서 제품 목록에 'NEW!!'라는 텍스트를 추가한 예제이다. 실제로 HTML태그 안에는 'NEW!'라는 텍스트를 표시하지 않았지만, 가상 요소를 사용해 스타일로 표현할 수 있다.

...
li.new::after {
  content: "NEW!!";
  font-size: x-small;
  padding: 2px 4px;
  margin: 0 10px;
  border-radius: 2px;
  background: #f00;
  color: #fff;
}
</style>

...
<div class="container">
  <h1> 제품 목록 </h1>
  <ul>
    <li class="new">제품A</li>
    <li>제품B</li>
    <li>제품C</li>
    <li class="new">제품D</li>
  </ul>
</div>
...