-
선택자(Selector)의 종류
Html예제1
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <style> #container1 { width:500px; margin:10px auto; } p { font-style: italic; } .accent1 { border:1px solid #000; padding:5px; } .bg1 { background-color:#ddd; } </style> </head> <body> <div id="container1"> <h1 class="accent1 bg1">hello</h1> <p>test <span class="accent1">html</span> code.</p> <p>test html code</p> </div> </body> </html>hello
test html code.
test html code
h2 test h2 html code.
선택자 예제
h1~6까지 모두 포함
"h1, h2, h3, h4, h5, h6"전체 선택자(Universal Selector)
* { margin:10px; }문서의 모든 요소에 적용할 때 사용.
타입 선택자(Type Selector)
p { font-style: italic; }클래스 선택자(Class Selector)
선택자 우선순위가 타입 선택자보다 높다
.accent1 { border:1px solid #000; padding:5px; }ID 선택자(ID Selector)
선택자 우선순위가 클래스 선택자보다 높다
#container1 { width:500px; margin:10px auto; }복합 선택자(Combinator)
아래의 선택자들
일치 선택자
h1.id1 { text-align: center; }tag가 h1이면서 class가 id1인 것.
자식 선택자
h1>p { text-align: center; }h1의 자식 중 p를 대상으로 한다.
후손 선택자
h1 p { text-align: center; }h1의 자식 뿐만이 아니라 손자 등 아래에 있는 모든 자손들을 대상으로 한다.
인접 형제 선택자(Adjacent Sibling Combinator): E+C
E 요소를 뒤따르는 C 요소를 선택. (E와 C사이에 다른 요소가 존재하면 선택하지 않음.)
h1+ul { background: yellowgreen; color: darkgreen; }
일반 형제 선택자(General Sibling Combinator): E~C
E 요소가 앞에 존재하면 C를 선택. (E가 C보다 먼저 등장하지 않으면 선택하지 않음.) 복수선택.
h1~ul { background: darkgreen; color: yellowgreen; }
속성 선택자(Attribute Selectors)
특정 속성이 있는 요소를 선택하는 선택자
아래 예제에서 '항목1'이 선택된다.
<style> a[href] { ... } </style> ... <ol> <li><a> 목록1 </a><li> <li><a href="#"> 항목1 </1></li> </ol>E[attr] 'attr' 속성이 포함된 요소 E를 선택한다.
a[href] { background: yellowgreen; color: black; }E[attr="val"] 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 E를 선택한다.
input[type="text"] { width: 150px; border: 1px solid #000; }E[attr~="val"] 'attr' 속성의 값에 'val'이 포함되는 요소를 선택한다. (공백으로 분리된 값이 일치해야 한다.)
E[attr^="val"] 'attr' 속성의 값이 'val'으로 시작하는 요소를 선택한다.
E[attr$="val"] 'attr' 속성의 값이 'val'으로 끝나는 요소를 선택한다.
a[href$=".xls"] { background: darkgreen; }E[attr*="val"] 'attr' 속성의 값에 'val'이 포함되는 요소를 선택한다.
E[attr|="val"] 'attr' 속성의 값이 정확하게 'val' 이거나'val-' 으로 시작되는 요소 E를 선택한다.
가상 클래스 선택자(Pseudo-Classes)
E::link 방문하지 않은 링크 E를 선택한다.
E::visited 방문한 링크 E를 선택한다.
E::active E 요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택한다.
E::hover E 요소에 마우스가 올라가 있는 동안 E를 선택한다.
E::focus E 요소에 포커스가 머물러 있는 동안 E를 선택한다.
구조적 가상 클래스 선택자(Structural pseudo-classes)
E::root 문서의 최상위 요소(html)를 선택한다.
E::nth-child(n) 앞으로부터 지정된 순서와 일치하는 요소가 E 라면 선택한다.
(E 아닌 요소의 순서가 계산에 포함)E::nth-last-child(n) 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택한다.
(E 아닌 요소의 순서가 계산에 포함)E::nth-of-type(n) E 요소 중 앞으로부터 순서가 일치하는 E 요소를 선택한다.
(E 요소의 순서만 계산에 포함)E::nth-last-of-type(n) E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택한다.
(E 요소의 순서만 계산에 포함)E::first-child 첫 번째 등장하는 요소가 E 라면 선택한다.
(E 아닌 요소의 순서가 계산에 포함)E::last-child 마지막에 등장하는 요소가 E 라면 선택한다.
(E 아닌 요소의 순서가 계산에 포함)
E::first-of-type E 요소 중 첫 번째 E를 선택한다.
(E 요소의 순서만 계산에 포함)E::last-of-type E 요소 중 마지막 E를 선택한다.
(E 요소의 순서만 계산에 포함)E::only-child E 요소가 유일한 자식이면 선택한다.
(E 아닌 요소가 하나라도 포함되면 선택하지 않는다.)E::only-of-type E 요소가 유일한 타입이면 선택한다.
(E 아닌 요소가 포함되어도 E 타입이 유일하면 선택합니다.)E::empty 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택한다.
언어 선택자(language pseudo-classes)
E::lang(ko) HTML lang 속성의 값이 'ko'으로 지정된 요소를 선택합니다.
부정 선택자(Negation pseudo-class)
E::not(S) S가 아닌 E 요소를 선택합니다.
목적 선택자(The target pseudo-class)
E::target E의 URI가 요청되면 선택합니다.
(따라서 E는 ID가 지정되어 있어야 합니다.)
UI요소 상태 선택자(The UI element states pseudo-classes)
E::enabled 사용 가능한 폼 콘트롤(input, textarea, select, button) E를 선택합니다. 3 IE6, 7, 8
E::disabled 사용 불가능한 폼 콘트롤(input, textarea, select, button) E를 선택합니다. 3 IE6, 7, 8
E::checked 선택된 폼 콘트롤(input checked="checked")을 선택합니다.
가상 엘리먼트 선택자(Pseudo-Elements)
E::first-line E 요소의 첫 번째 라인을 선택합니다. 1 IE6
E::first-letter E 요소의 첫 번째 문자를 선택합니다. 1 IE6
E::before E 요소의 시작 지점에 생성된 요소를 선택합니다. 2 IE6, 7
E::after E 요소의 끝 지점에 생성된 요소를 선택합니다.
선택자(Selector) 우선순위
제작자(author) 원천 소스 : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일
사용자(user) 원천 소스 : 사용자가 직접 정하는 자신이 사용할 스타일
사용자 도구(user agent) 원천 소스 : 웹 브라우저 자체에 지정된 기본 스타일
원천 소스 우선 순위
!important 선언을 한 사용자 스타일 > !important 선언을 한 제작자 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 도구 선언 (브라우저 자체의 선언)
CSS 명시도(Specificity) 계산법
!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]
마지막에 지정된 스타일을 우선 적용
스타일 우선순위가 같거나, 계산 방법이 없는 경우 마지막에 지정된 스타일이 우선으로 적용됩니다. 예를 들어 자손 선택자와 자식 선택자가 부딪힐 경우, 우선순위 계산법이 없으므로 두 선택자 중 마지막에 지정된 스타일이 적용됩니다.
'Html Css JavaScript' 카테고리의 다른 글
Javascript - 클립보드 복사 (0) 2018.12.22 Javascript jQuery 기본 정의 (0) 2018.09.28 javascript(Html script) 기본구조 (0) 2018.09.28 CSS태그의 문단 구분 - block-level과 inline-level (0) 2018.02.03 CSS의 기본 정리 모음 (style sheet) (0) 2018.02.03 html 기본 구조 (0) 2018.02.03 style type text/css 예제 (0) 2018.02.03 html,CSS 예제 - div, span 차이 (0) 2018.02.03