다재다능한 CSS3 선택자

연결 선택자(combination selector)

  • 하위선택자(descendant selector) : 지정한 모든 하위 요소에 스타일 적용하기

section p { color: blue; }

여기서 section이 상위요소 p가 하위요소이다. 하위 선택자를 이용해 section안에 있는 모든 p 요소의 글자색을 파란색으로 지정한 것이다.

  • 자식 선택자(child selector) : 자식 요소에만 스타일 적용하기

section > p { color: blue; }
  • 인접 형제 선택자(adjacent selector) : 가장 가까운 형제 요소에 스타일 적용

문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용된다. +로 표시

h1 + p { text-decoration: underline; }

h1요소 다음에 오는 p요소들 중 첫번째로 오는 요소에만 밑줄을 그으라는 의미이다.

  • 형제 선택자(sibling selector) : 형제 요소에 스타일 적용하기

모든 형제 요소에 적용된다. ~로 표시

속성 선택자

  • [속성] 선택자 : 지정한 속성에 스타일 적용하기

a[href] {
	background: yellow;
}

a태그 중 href속성이 있는 요소에만 적용된다.

  • [속성 = 값] 선택자 : 특정 값을 갖는 속성에 스타일 적용하기

a[href="_blank"] {
	padding-right: 30px;
    background:url(images/newwindow.png) no-repeat center right;
}
  • [속성 ~= 값] 선택자 : 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기

[class ~="button"]{
	border: 2px solid black;
    box-shadow: rgba(0,0,0,0.4) 5px 5px;
}
  • [속성 |= 값] 선택자 : 특정 값이 포함된 속성에 스타일 적용하기

이 선택자는 속성 값이 지정한 값이거나 "값-"으로 시작하면 스타일을 적용한다. 즉 -으로 연결한 단어가 있더라도 스타일을 적용한다.

a[title |="us"]{
	background: url(images/us.png) no-repeat left center;
    padding: 5px 25px;
}
  • [속성 ^= 값] 선택자 : 특정 값으로 시작하는 속성에 스타일 적용하기

a[title ^="eng"]{
	background: url(images/us.png) no-repeat left center;
    padding: 5px 25px;
}
<a href="#" title="english">영어</a>
  • [속성 $= 값] 선택자 : 특정 값으로 끝나는 속성에 스타일 적용하기

a[title $="hwp"]{
	background: url(images/us.png) no-repeat left center;
    padding: 5px 25px;
}
<a href="#" title="intro.hwp">hwp 파일</a>
  • [속성 *= 값] 선택자 : 값의 일부가 일치하는 속성에 스타일 적용

a[href *="w3"]{
	background: blue;
    color: white;
}
<a href="http://www.w3c.org/TR/html">HTML 표준안 사이트</a>
<a href="http://www.w3c.org/TR/css3-mediaqueries">미디어쿼리</a>

가상 클래스(:)와 가상 요소(::)

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

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

여기서 순서가 중요하다. :link > :visited > :hover, :active순서대로 정의한다.

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

웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용

  • 구조 가상 클래스

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

  • 그 외 가상 클래스

  • 가상 요소

가상 요소는 내용의 일부만 선택해 스타일을 적용할 때 사용한다.

Last updated