다재다능한 CSS3 선택자
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
하위선택자(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
웹 요소를 활성화했을 때의 스타일 적용
:focus
웹 요소에 초점이 맞추어졌을때 스타일 적용
여기서 순서가 중요하다. :link > :visited > :hover, :active순서대로 정의한다.
UI 요소 상태에 따른 가상 클래스
웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용
가상 클래스
설명
:enabled , :disabled
요소를 사용할 수 있을 때와 없을 때의 스타일 지정
:checked
라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정
구조 가상 클래스
웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자이다.
가상 클래스
설명
:root
문서 전체에 적용하기
:nth-child(n), :nth-last-child(n)
자식 요소의 위치에 따라 스타일 적용하기(주로 메뉴 항목)
:nth-of-type(n),:nth-last-of-child(n)
특정 태그 위치에 스타일 적용하기
:first-child,:last-child
첫번째, 마지막 요소에 스타일 적용
:first-of-child,:last-of-child
형제 관계 요소의 위치에 따라 스타일 적용
그 외 가상 클래스
가상 클래스
설명
:target
앵커 목적지에 스타일 적용하기
:not
특정 요소가 아닐 때 스타일 적용하기
가상 요소
가상 요소는 내용의 일부만 선택해 스타일을 적용할 때 사용한다.
가상 요소
설명
사용할 수 있는 속성
::first-line,::first-letter
첫 번째 줄, 첫 번째 글자에 스타일 적용
font, background, color, word-spacing, letter-spacing, text-decoration, verticla-align, text-transform, line-height
::before,::after
내용의 앞뒤에 콘텐츠 추가하기
:only-child,:only-of-type
하나뿐인 자식 요소에 스타일 적용