[기본 개념] 4 | (4.1) 연결, 속성 선택자

[기본 개념] 4 | 고급 선택자 - (4.1) 연결, 속성 선택자

1> 연결 선택자

2> 속성 선택자

3 가상 클래스와 가상 요소

1 연결 선택자

하위 요소에 스타일을 적용하는 하위 선택자

 

기본형

상위요소 하위요소

 

 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 상위 요소와 하위 요소를 공백으로 구분한다.

 

(ex. 하위 선택자를 사용하여 글자색 적용하기)

 

...
  section p { color : blue; }
  // section 요소의 모든 하위 p 요소를 파란색 글자로 지정
</style>
...
<section>
  <h1>예약 방법 & 사용 요금</h1>
  <p>아직 온라인 예약 신청이 ...</p>
  // section 요소의 모든 하위(자식, 손자) p 요소에 적용
  <div>
    <p>가족실</p>
    // section 요소의 모든 하위(자식, 손자) p 요소에 적용
    <p>도미토리</p>
    // section 요소의 모든 하위(자식, 손자) p 요소에 적용
  </div>
</section>
...

 

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

 

기본형

상위요소 > 하위요소

 

 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자다. 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분한다. 

 

(ex. 자식 선택자를 사용하여 글자색 적용하기)

 

...
  section > p { color : blue; }
  // section 요소의 자식인 p 요소를 파란색 글자로 지정
</style>
...
<section>
  <h1>예약 방법 & 사용 요금</h1>
  <p>아직 온라인 예약 신청이 ...</p>
  // section 요소의 자식인 p 요소에만 적용
  <div>
    <p>가족실</p>
    <p>도미토리</p>
  </div>
</section>
...

 

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

 

기본형

요소1 + 요소2

 

 형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 한다. 요소1과 요소2는 같은 레벨이면서 요소1이후로 가장 먼저 오는 요소2를 택한다.

 

(ex. 인접 형제 요소에 스타일 적용하기)

 

...
  h1 + p {	// h1의 형제인 p 요소중 첫 번째 p
    background-color : #222;
    color : #fff;
  }
</style>
...

 

형제 요소에 스타일을 적용하는 형제 선택자

 

기본형

요소1 ~ 요소2

 

 인접 형제 선택자와 달리 모든 형제 요소에 적용된다. 요소1과 형제인 요소2를 모두 선택하는 것이다.

 

(ex. 모든 형제 요소에 스타일 적용하기)

 

...
  h1 ~ p {	// h1의 형제인 모든 p 요소
    background-color : #222;
    color : #fff;
  }
</style>
...

2 속성 선택자

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

 

 HTML 태그를 작성할 때 사용하는 여러 속성값에 따라 원하는 요소를 선택할 수 있다. 대괄호([ ])사이에 원하는 속성을 입력하면 된다.

 

(ex. 요소 중에서 링크가 있는 요소만 스타일 적용하기)

 

...
  a[href] {	// href 속성이 있는 a 요소를 찾는 선택자
    background : yellow;
    border : 1px solid #ccc;
    font-weight : normal;
  }
</style>
...

 

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

 

 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 수 있다. 대괄호([ ]) 안에 속성과 속성값을 넣고 그 사이에 '=' 기호를 표시한다.

 

(ex. 새 탭으로 열리는 링크에만 아이콘 추가하기)

 

...
 a[target="_blank"] {	// target 속성값이 _blank인 a 요소를 선택하는 선택자
   padding-right : 30px;
   background : url(images/newwindow.png) no-repeat center right;
 }
</style>
...

 

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

 

 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택한다. 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리하다. 

 

 [속성 ~= 값] 선택자는 값이 정확히 일치하는 요소를 선택하며, 다른 글자가 속성값에 포함되어도 선택하지 않는다.

 

(ex. 특정 속성값이 포함된 요소에 스타일 적용하기)

 

...
  [class ~= button] {	// class 속성값에 button이 포함된 요소를 찾는 선택자
    box-shadow : rgba(0, 0, 0, 0.4) 4px 4px;
    border-radius : 5px
  }
</style>
...

 

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

 

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

 

(ex. title 속성값에 따라 아이콘 다르게 표시하기)

 

...
  a[title |= us] {	// 속성값이 "us" or "us-"로 시작하는 a 요소를 찾는 선택자
    background : url(images/us.png) no-repeat left center;
  }
</style>
...

 

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

 

 지정된 속성값으로 시작하는 요소를 선택한다.

 

(ex. 속성값의 시작 부분이 일치하는 요소에 스타일 적용하기)

 

...
  a[title ^="eng"]  {	// 속성값이 "eng"로 시작하는 a 요소를 찾는 선택자
    background : url(images/us.png) no-repeat left center;
    padding : 5px 25px;
  }
</style>
...

 

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

 

 지정한 속성값으로 끝나는 요소를 선택한다.

 

 예를 들어 [속성 &= 값] 선택자를 사용해 href에 링크된 파일의 확장자, 파일 이름의 마지막 속성값을 체크한 후 파일 형식에 맞는 아이콘을 옆에 표시할 수도 있다.

 

(ex. 파일 확장자에 따라 아이콘 다르게 표시하기)

 

...
  a[href $= hwp] {	// 링크 속성값이 hwp로 끝나는 a 요소를 찾는 선택자
    background : url(images/hwp_icon.gif) center right no-repeat;
    padding-right : 25px;
  }
</style>
...

 

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

 

 속성값이 어느 위치에 있든지 지정한 속성값 포함되어 있다면 해당 요소를 선택한다.

 

(ex. 속성값의 일부가 일치하는 요소에 스타일 적용하기)

 

...
  a[href *= w3] {	// 속성값 중 일부에 w3가 있는 a 요소를 찾는 선택자
    background : blue;
    color : white;
  }
</style>
...

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)