정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]

CSS selectorsin
HTML
정 찬 명

Lv.1 > 타입 선택자
형식
E // ★★★★★
의미
E 타입의 HTML 요소를 모두 선택.
예시
section {} // <section>...</section>
article {} // <article>...</article>
nav {} // <nav>...</nav>
aside {} // <aside>...</aside>

활용
html { font-family: sans-serif; }
body { margin: 0; }
article,
aside,
details,
footer,
header,
nav,
section,
summary { display: block; }
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
참고: HTML 5.1 명세에는 picture, source, details, summary, menu, menuitem
요소가 새로 추가됐다.
Lv.1 > 타입 선택자

형식
E#my-id // ★★★★★
E.my-class // ★★★★★
의미
E#my-id // my-id 라는 아이디를 포함한 E 요소 하나를 선택.
E.my-class // my-class 라는 클래스를 포함한 E 요소 모두를 선택.
예시
#my-id {} // <div id="my-id">...</div>
.my-class {} // <div class="my-class">...</div>
http://example.com/#my-id
id를 포함한 요소는 링크 타겟이 될 수 있다.
Lv.1 > 아이디, 클래스 선택자

1. #가
2. #a1-_
3. #1
4. #-a
5. #-
6. #--
7. #-1
8. #-_
9. #_
10. #_a
11. #_1
12. #__
1. .가
2. .a1-_
3. .1
4. .-a
5. .-
6. .--
7. .-1
8. .-_
9. ._
10. ._a
11. ._1
12. .__

1. #가 // 특수 문자를 제외한 '문자'로 시작할 수 있다.
2. #a1-_ // 문자, 숫자, 하이픈, 언더스코어 사용 가능.
3. #1 // '숫자'로 시작할 수 없다.
4. #-a // '하이픈+문자'로 시작할 수 있다.
5. #- // '하이픈'으로만 구성할 수 없다.
6. #-- // '하이픈+하이픈'으로 시작할 수 없다.
7. #-1 // '하이픈+숫자'로 시작할 수 없다.
8. #-_ // '하이픈+언더스코어'로 시작할 수 있다.
9. #_ // '언더스코어'는 '문자'와 사용 규칙과 같다.
10. #_a // #_a == #aa
11. #_1 // # _1 == #a1
12. #__ // #__ == #aa

형식
E F // ★★★★★
의미
E 요소의 자손(자식, 손자) F 를 모두 선택.
예시
section h2 {} // <section><h2>...</h2></seciton>
article p {} // <article><p>...</p></article>
nav li {} // <nav><ul><li>...</li></ul></nav>
aside a {} // <aside>
<ul>
<li>
<a>...</a>
</li>
</ul>
</aside>
Lv.1 > 자손 선택자

알아두기 가상 선택자 :x 용법
지금부터 콜론(:)이 포함되어 있는 가상 선택자가 등장합니다.
E:focus {}
E:hover {}
...
:focus 와 *:focus는 완전히 동일합니다.
일반적으로는 아래와 같이 특정 선택자와 붙여 사용합니다.
a:focus {}
button:focus {}
.btn:focus {}
#search:focus {}
:focus 만 사용했다면 *:focus와 동일하다는 것을 기억하세요.

알아두기 가상 선택자 종류
가상 선택자는 크게 두 가지로 나눌 수 있습니다.
가상 클래스 선택자(:) 가상 요소 선택자(::)
E:link
E:visited
E:active
E:hover
E:focus
E:lang(fr)
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled
E:disabled
E:checked
E:not(s)
E::first-line
E::first-letter
E::before
E::after
HTML에 이미 존재하는 DOM 노드를
선택하면 "가상 클래스" 선택자.
HTML에 존재하지 않지만 가상의 DOM
노드를 생성하여 선택하는 것은 "가상
요소" 선택자.
참고: 가상 클래스는 가상 요소보다
구체성(선택자 우선순위 점수)이 높다.

형식
E:link // ★★★★★
E:visited // ★★★★★
의미
E:link // 아직 방문한 적 없는 E 링크를 선택.
E:visited // 이미 방문한 E 링크를 선택.
예시
a:link {}
a:visited {}
:link, :visited 선택자는 a 요소에만 적용 가능.
Lv.1 > 링크 가상 클래스 선택자

형식
E:focus // ★★★★★
E:hover // ★★★★★
E:active // ★★★★★
의미
E:focus // 키보드 초점을 포함한 요소를 선택.
E:hover // 마우스 초점이 가리키는 요소를 선택.
E:active // 실행 중인 링크/버튼 요소를 선택.
예시
a:focus,
a:hover {}
a:active {}
Lv.1 > 사용자 액션 가상 클래스 선택자

활용
a:link {}
a:visited {}
a:focus,
a:hover {} // :focus, :hover에 동일한 스타일 할당.
a:active {} // 클릭(또는 스페이스 키)하는 순간 선택.
li:hover, // 행 구조에 사용 가능.
tr:hover {}
input:focus, // 폼 콘트롤 요소에 사용 가능.
select:focus {}
Lv.1 > 사용자 액션 가상 클래스 선택자

형식
E::first-line // ★★
E::first-letter // ★
의미
E::first-line // 블럭(or 인라인 블럭) E의 첫 번째 행 선택.
E::first-letter // 블럭(or 인라인 블럭) E의 첫 번째 문자 선택.
예시
article::first-line {} // ::first-line 데모
p::first-letter {} // ::first-letter 데모
CSS3에서 가상요소는 더블콜론(::) 사용. IE 9 부터 지원.
IE 8 까지 지원해야 한다면 싱글콜론(:)만 사용해도 됨.
Lv.1 > 가상 요소 선택자

알아두기 CSS 선택자 붙여 쓰기
선택자를 띄어쓰기 없이 붙여 쓰는 경우,
양쪽 조건이 모두 성립하는(&&) 요소를 선택한다.
#a.b {} // #a 이면서 동시에 .b 일 때 선택
.b.c {} // .b 이면서 동시에 .c 일 때 선택
.c:hover {} // .c 이면서 동시에 :hover 일 때 선택
선택자의 이런 특징은
선택자를 조건문으로 사용할 수 있다는 것을 의미.
#a {}
#a.b {}
#a.c {}
#a 요소는 최소한 세 가지 스타일이 있다.

형식
* // ★★★
의미
모든 요소를 선택.
예시
* { // 전체 초기화는 피하는 것이 좋다.
margin: 0;
padding: 0;
list-style: none;
}
nav * {} // 필요한 곳에 범위를 제한해서 사용.
Lv.2 > 전체 선택자

알아두기 CSS 선택자 성능
CSS 선택자는 성능에 영향을 미치는가?
예:
1,000개의 노드에 최악의 선택자만 일부러 사용하는 경우,
최선의 선택자만 사용하는 것 보다 0.015 ~ 0.15초 정도 느릴 수
있음.
하지만 특정 선택자 패턴이 모든 브라우저에서 항상 느리다고
말할 수는 없다.
아니요:
현존하는 브라우저에서 선택자 패턴이 성능에 미치는 영향은
매우 미미.
"CSS에서 아키텍처는 괄호 밖에 있고, 성능은 괄호 안에 있다."
* 선택자가 성능에 미치는 영향 실험(En) - https://goo.gl/QfBUua

형식
E > F // ★★★★★
의미
E 요소의 자식 F를 선택.
예시
section > h2 {}
article > p {}
.gnb>ul>li>ul>li // 이런 구조의 DOM을 가정할 때.
.gnb li {} // 조상 li와 자손 li 동시 선택.
.gnb>ul>li {} // 조상 li만 선택.
.gnb li li {} // 자손 li만 선택.
Lv.2 > 자식 선택자

형식
E + F // ★★★
의미
E 요소를 뒤따르는 인접 형제 F를 선택.
예시
h2 + p {} // <h2></h2><p></p>
h2 + div {} // <h2></h2><div></div>
h2 + table {} // <h2></h2><table></table>
a + p + b {} // <a></a><p></p><b></b>
Lv.2 > 인접 형제 선택자

활용
<div class="a b">동적으로 변하는 내용</div>
<div class="c" hidden>따라 변하는 결과</div>
// 요구사항
.b 클래스는 동적으로 추가/삭제.
.b 클래스가 있으면 .c 요소를 화면에 출력.
// CSS 코드
.b + .c { display:block; } // .b에 따라 .c 스타일 재설정.
Lv.2 > 인접 형제 선택자

형식
E[attr] // ★★★★
E[attr="val"] // ★★★★
E[attr~="val"] // ★
E[attr|="val"] // ★
의미
E[attr] // attr 속성을 포함한 E요소를 선택.
E[attr="val"] // attr과 val이 정확하게 일치하는 E 요소.
E[attr~="val"] // 공백으로 분리된 val 값을 포함한 E 요소.
E[attr|="val"] // 값이 val 또는 val- 으로 시작하는 E 요소.
Lv.2 > 속성 선택자

활용
[hidden] { display: none; } // 속성이 존재하면 선택.
[disabled] { opacity: 0.5; }
[type="checkbox"], // 속성과 값이 일치하면 선택.
[type="radio"] { box-sizing: border-box; }
[href="#"] { background: red; }
[data-arr~="cola"] // 공백으로 분리된 값이 일치하면 선택.
<a data-arr="apple cola bacon>...</a>
[hreflang|="en"] // 완전히 일치하거나, 하이픈(-)이 따르면 선택.
<a hreflang="en">...</a>
<a hreflang="en-US">...</a>

형식
E:first-child // ★★★★★
의미
부모의 첫 번째 자식 E를 선택.
예시
.lnb :first-child {} // .lnb 자손 중 첫 번째 자식 선택.
<nav class="lnb">
<h2>...</h2> // .lnb 요소의 *:first-child 이므로 선택.
<ul> // nav 요소의 두 번째 자식.
<li>...</li> // ul 요소의 *:first-child 이므로 선택.
<li>...</li> // ul 요소의 두 번째 자식.
</ul>
</nav>
Lv.2 > 구조 가상 클래스 선택자

활용
.btn-group > .btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.list-group > li:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
Lv.2 > 구조 가상 클래스 선택자

형식
E:lang(str) // ★★
의미
HTML lang 속성과 값을 이용하여 언어를 명시한 요소 E를 선택.
예시
:lang(ko) { font-family: Dotum, sans-serif; }
:lang(en) { font-family: Helvetica, sans-serif; }
<html lang="ko">
Dotum
<p>Dotum <q lang="en">Helvetica</q> Dotum</p>
</html>
HTML lang 속성에는 유효한 언어 코드(BCP 47) 값을 사용해야 한다.
Lv.2 > :lang() 가상 클래스 선택자 IE 7(X)

형식
E::before // ★★★★★
E::after // ★★★★★
의미
E::before // 요소 내부 시작 지점 가상 요소 선택.
E::after // 요소 내부 종료 지점 가상 요소 선택.
예시
body::before { content: "Hello World!"; }
body::after { content: "Goodbye!"; }
<body>
<::>Hello World!</::> // 시작 지점에 가상 인라인 요소 생성 후 선택.
...
<::>Goodbye!</::> // 종료 지점에 가상 인라인 요소 생성 후 선택.
</body>
Lv.2 > ::before, ::after 가상 요소 선택자 IE 7(X)

활용
.parent::after{
content: "";
display: block;
clear: both;
}
.a{float:left;}
.b{float:right;}
.parent
.a
{float:left;}
.b
{float:right;}
.parent
.a
{float:left;}
.b
{float:right;}
.parent::after{clear:both;}
Lv.2 > ::before, ::after 가상 요소 선택자 IE 7(X)

형식
E ~ F // ★★★
의미
E 요소 이후에 등장하는 형제 F를 모두 선택.
예시
h2 ~ p {} // h2 요소를 뒤 따르는 모든 p 요소 선택.
<h2>...</h2>
<div>...</div>
<p>...</p> // 앞선 형제 노드 중 h2가 있으므로 선택한다.
<ul>...</ul>
<p>...</p> // 앞선 형제 노드 중 h2가 있으므로 선택한다.
<div>...</div>
Lv.3 > 일반 형제 선택자

형식
E[attr^="val"] // ★★★
E[attr$="val"] // ★★★
E[attr*="val"] // ★
의미
E[attr^="val"] // 속성 값이 val 으로 시작하는 E 선택.
E[attr$="val"] // 속성 값이 val 으로 끝나는 E 선택.
E[attr*="val"] // 속성 값이 val 을 포함하는 E 선택.

활용
a[href^="http"] {}
<a href="http://example.com/">...</a>
img[src$=".png"] {}
<img src="example.png" alt="...">
a[href*="/product/"] {}
<a href="../product/ex.html">...</a>

형식
E:checked // ★★★★★
E:enabled // ★
E:disabled // ★★★★★
의미
E:checked // 사용자가 체크한 인풋 요소 E를 선택.
E:enabled // 사용 가능한 UI 요소 E를 선택.
E:disabled // 사용 불가능한 UI 요소 E를 선택.
Lv.3 > UI 요소 상태 가상 클래스 선택자 IE 7~8(X)

활용
:checked {}
<input type="radio"> // checked 속성이 없어도
<input type="checkbox"> // 사용자 액션에 따라 선택.
:disabled {}
<input disabled> // disabled 속성에 따라서 선택.
<button disabled>
Lv.3 > UI 요소 상태 가상 클래스 선택자 IE 7~8(X)

형식
E:target // ★★★
의미
URI 타겟이 앵커(#)를 가리키는 경우 타겟 요소를 선택한다.
예시
section:target {}
http://example.com/index.html#overview
<section id="overview">...</section>
Lv.3 > 타겟 가상 클래스 선택자 IE 7~8(X)

활용
.panel { display:none; }
.panel:target { display:block; }
<a href="#introduction">...</a>
<section class="panel" id="introduction">...</section>
<section class="panel" id="selectors">...</section>
<section class="panel" id="...">...</section>
Pure CSS :target slider demo:
http://codepen.io/naradesign/pen/gaWggP?editors=1100
Lv.3 > 타겟 가상 클래스 선택자 IE 7~8(X)

형식
E:not(s) // ★★★
의미
E 요소 중 s 아닌 요소를 선택.
예시
a:not(.btn) {} // a 요소에 .btn 클래스 없는 경우 선택.
img:not([alt]) {} // img 요소에 alt 속성 없는 경우 선택.
a:not([href^="http"]) {}
<a href="product/index.html">...</a>
// a 요소의 href 값이 http로 시작하지 않으므로 선택.
Lv.3 > 부정 가상 클래스 선택자 IE 7~8(X)

형식
E:root // ★
의미
문서의 최상위 요소 E 선택. HTML 에서는 무조건 <html>.
예시
:root {} // HTML 요소를 선택.
<html>
<head>...</head>
<body>...</body>
</html>
Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)

형식
E:empty // ★★
의미
자식(또는 텍스트)이 없는 요소 E를 선택.
예시
:empty {} // 비어있는 모든 요소를 선택.
<span></span> // 선택 함.
<span>내용 있는 요소</span> // 선택 안 함.

형식
E:only-child // ★★★
의미
부모의 유일한 자식이면 E를 선택.
예시
p:only-child {} // p가 유일한 자식일 때 선택.
<div><p>...</p></div> // p 선택 함. div의 유일한 자식이므로.
<div>
<p>...</p> // p 선택 안 함. 유일한 자식 아니므로.
<span>...</span>
</span>

알아두기 E:x-of-type 구조 가상 클래스 선택자
지금부터 :x-of-type 이라는 형식의 구조 가상 클래스 선택자가 등장.
이런 선택자들이 있습니다.
E:only-of-type // :only-child 중 E만 필터링.
E:first-of-type // :first-child 중 E만 필터링.
E:last-of-type // :last-child 중 E만 필터링.
E:nth-of-type(n) // :nth-child(n) 중 E만 필터링.
E:nth-last-of-type(n) // :nth-last-child(n) 중 E만 필터링.
이것을 기억해 두세요.
"-of-type" 이라는 것은 HTML 요소 이름 E로 필더링 된 것을 의미.
"-of-type" 으로 끝나는 선택자는 타입을 구분하지 않는 "-child" 선택자에서
E 타입만 선별(필터링) 후, 그 중에서만 선택하도록 구체화 한 것.
다시 말해 "-of-type" 으로 끝나는 선택자는 선택 시 E 타입 아닌 요소의
존재나 순서를 전혀 고려하지 않음.

형식
E:only-of-type // ★★★
의미
부모의 자식으로 E 타입이 하나 뿐일 때 선택.
예시
p:only-of-type {} // p가 유일한 타입일 때 선택.
<div><p>...</p></div> // p 선택 함. div 에서 유일한 p 타입.
<div>
<p>...</p> // p 선택 함. div 에서 유일한 p 타입.
<span>...</span> // p 아닌 요소는 고려하지 않음.
</div>

형식
E:last-child // ★★★★★
의미
부모의 마지막 자식 E를 선택.
예시
.lnb :last-child {} // .lnb 자손 중 모든 마지막 자식.
<nav class="lnb">
<h2>...</h2> // .lnb 요소의 첫 번째 자식.
<ul> // .lnb 요소의 *:last-child 이므로 선택.
<li>...</li> // ul 요소의 첫 번째 자식.
<li>...</li> // ul 요소의 *:last-child 이므로 선택.
</ul>
</nav>

활용
.btn-group > .btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.list-group > li:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

형식
E:first-of-type // ★★
의미
부모의 자식 E 타입 중 첫 번째 요소 선택.
예시
p:first-of-type {} // p 타입 중 첫 번째 요소 선택.
<article>
<img> // 계산에 포함하지 않는 타입.
<p>...</p> // p 타입 중 첫째 요소이므로 선택.
<div>...</div> // 계산에 포함하지 않는 타입.
<p>...</p> // p 타입 중 첫째 아니므로 선택 안 함.
</article>

형식
E:last-of-type // ★★
의미
부모의 자식 E 타입 중 마지막 요소 선택.
예시
p:last-of-type {} // p 타입 중 마지막 요소 선택.
<article>
<p>...</p> // p 타입 중 마지막 요소 아니므로 선택 안 함.
<div>...</div> // 계산에 포함하지 않는 타입.
<p>...</p> // p 타입 중 마지막 요소이므로 선택.
<img> // 계산에 포함하지 않는 타입.
</article>

알아두기 E:nth-x(n) 구조 가상 클래스 선택자
지금부터 :nth-x(n) 형식의 구조 가상 클래스 선택자가 등장합니다.
이런 선택자들이 있습니다.
E:nth-child(n)
E:nth-of-type(n)
E:nth-last-child(n)
E:nth-last-of-type(n)
이것을 기억해 두세요.
:nth-
:nth- 선택자는 (n)번째 요소 또는 (n)번째 타입을 선택하는 역할.
(n)의 형식은 다음과 같습니다.
(정수) // :nth-child(4) 4번째 요소 선택. 4
(배수n) // :nth-child(2n) 2배수 모두 선택. 2, 4, 6, 8...
(±배수n ±정수) // :nth-child(2n+4) 4번째 요소부터 2배수 선택.
// 4, 6, 8, 10...

형식
E:nth-child(n) // ★★★★★
의미
자식 중 (n) 번째 요소가 E 라면 선택.
예시
a:nth-child(3) {}
<div>
<a>...</a>
<b>...</b>
<a>...</a> // 세 번째 요소가 a 이므로 선택.
<b>...</b>
</div>

활용
li:nth-child(odd) // li:nth-child(even) 형식도 가능.
li:nth-child(2n+1) // li:nth-child(odd)와 동일한 결과.
li:nth-child(2n) // li:nth-child(2n+1)와 동일.
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
이 밖에 게시판 등 표 형식에서
tr:nth-child(n) 형식으로 사용하는 경우가 많다.

형식
E:nth-of-type(n) // ★★
의미
자식 E 타입 중 (n) 번째 요소 선택.
예시
a:nth-of-type(2) {}
<div>
<a>...</a> // a 타입의 첫 번째 요소.
<b>...</b>
<a>...</a> // a 타입의 두 번째 요소이므로 선택.
<b>...</b>
</div>

형식
E:nth-last-child(n) // ★★★
의미
자식 중 끝에서 (n) 번째 요소가 E 라면 선택.
예시
b:nth-last-child(3) {}
<div>
<a>...</a>
<b>...</b> // 끝에서 세 번째 요소가 b 이므로 선택.
<a>...</a>
<b>...</b>
</div>

형식
E:nth-last-of-type(n) // ★★
의미
자식 E 타입 중 끝에서 (n) 번째 요소 선택.
예시
b:nth-last-of-type(2) {}
<div>
<a>...</a>
<b>...</b> // b 타입 중 끝에서 두 번째 요소.
<a>...</a>
<b>...</b> // b 타입 중 끝에서 첫 번째 요소.
</div>

알아두기 구조 가상 클래스 선택자 활용
DOM 노드 수에 따라 동일한 요소에 다른 너비 값 적용하기는
CSS만으로 가능할까? 예를 들어 탭 메뉴 수에 따라 메뉴의
너비를 다른 값으로 처리해야 할 때...
메뉴가 1 개일 때 li { width: 100%; }
메뉴가 3 개일 때 li { width: 33.33%; }

웹 브라우저가 CSS flex 속성을 지원하는 경우
코드는 아래와 같이 단순하게 짤 수 있다.
ul { display: flex; }
li { flex: 1; }
CSS flex를 이용한 예 - https://goo.gl/zwX45V
CSS flex 속성은 IE 10 이상 버전부터 지원.

IE 9을 지원해야 하는 경우라면 flex 속성을 사용할
수 없으므로 JavaScript(jQuery) 사용을 고려할 수
있다.
var $li = $("ul").find("li");
$li.css("width", 100 / $li.length + "%");
jQuery를 이용한 예 - https://goo.gl/pEBy1O

구조 가상 클래스 선택자를 사용하면 CSS 만으로도
IE 9을 지원하는 코드를 작성할 수 있다.
li:only-child { width: 100%; }
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2)+li { width: 50%; }
li:first-child:nth-last-child(3)~li { width: 33.33%; }
li:first-child:nth-last-child(4)~li { width: 25%; }
CSS 선택자를 이용한 예 - https://goo.gl/V64vSl

하나의 요소를 가리키는 여러 개의 선택자가 존재하는 경우
우선 순위가 높은 선택자는 우선 순위가 낮은 선택자의 속성
값을 덮어 쓸 수 있다.
선택자 우선 순위 규칙 1
나중에 선언한 코드가 우선순위가 높다.
.a { color:red; } // 우선순위 낮음
.b { color:blue; } // 우선순위 높음
<i class="a b">나는 파랑입니다.</i>
삽입 스타일과 외부 스타일 또한 이 규칙의 적용을 받는다.
<style> 과 <link> 중 나중에 선언한 코드의 우선순위가 더 높다.
Selector specificity > 우선 순위 규칙 1

삽입 스타일과 외부 스타일 예.
나중에 선언한 코드의 우선 순위가 높다.
<style>
.a { color:red; } // 우선순위 낮음
</style>
<link rel="stylesheet" href="test.css">
test.css
.b { color:blue; } // 우선순위 높음
<i class="a b">나는 파랑입니다.</i>
삽입 스타일은 외부 스타일보다 항상 나중에 선언하는 것을
강력하게 권장한다.

선택자 우선 순위 규칙 2는 규칙 1 보다 우선 순위가 높다.
선택자 우선 순위 규칙 2
구체성 점수가 높은 선택자가 우선 순위가 높다.
1. 인라인 스타일 // 구체성이 가장 높다.
2. 아이디 선택자 // 구체성이 두 번째 높다.
3. 클래스, 가상 클래스, 속성 선택자 // 구체성이 세 번째 높다.
4. 타입, 가상 요소 선택자 // 구체성이 네 번째 높다.
우선순위를 고려하여 나중에 선언한 선택자라도, 구체성 점수가
낮으면 앞서 작성한 선택자보다 우선 순위에서 밀리게 된다.

선택자 구체성 점수를 계산하는 공식은 다음과 같다.
선택자에서 구체성을 발견할 때 마다 아래 칸에 1을 더함.
0 0 0 0
인라인 스타일 아이디 선택자 클래스,
가상 클래스,
속성 선택자
타입,
가상 요소 선택자
특정 선택자의 구체성 점수가 1000 이라면 구체성 점수가
0000~0999인 선택자 보다 우선 순위가 높다.
Specificity calculator - https://specificity.keegan.st/

CSS Diner
CSS 1~3 선택자를 퀴즈를 풀며 익혀 보세요.
https://flukeout.github.io/

:nth Tester
구조 가상 클래스 선택자를 직접 테스트해 보세요.
https://css-tricks.com/examples/nth-child-tester/

Specificity calculator
선택자 우선 순위를 계산해 보세요.
https://specificity.keegan.st/

CSS 4
다가올 미래의 CSS 4 선택자를 열람하세요.
http://css4-selectors.com/

정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (6)

Similar to 정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]

Similar to 정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017] (20)

정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]