*
: 전체 선택자 (Universal Selector)
: 모든 요소를 선택.예시 )
html ><div> <ul> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; color: purple; }
NAME
: 태그 선택자 (Type Selector)
: 태그 이름이NAME
인 요소 선택.예시 )
html ><div> <ul> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } div { width: 200px; height: 200px; background-color: darkgreen; } li { color: orange; } span { color: darkgreen; }
.NAME
: 클래스 선택자 (Class Selector)
: class의 속성값이NAME
인 요소 선택.예시 )
html ><div> <ul> <li class="one">첫째</li> <li>둘째</li> <li class="three">셋째</li> </ul> </div> <span class="one">넷다섯</span>
css >
* { font-size: 30px; } .one { color: orange; } .three { color: blue; }
#NAME
: 아이디 선택자 (ID Selector)
: id 속성값이NAME
인 요소 선택.예시 )
html ><div> <ul> <li>첫째</li> <li id="two">둘째</li> <li>셋째</li> </ul> </div> <span id="five">넷다섯</span>
css >
* { font-size: 30px; } #two { color: yellow; } #five { color: yellowgreen; }
NAMEother
: 일치 선택자 (Basic Combinator)
: 선택자NAME
과other
을 동시에 만족하는 요소 선택.예시 )
html ><div> <ul> <li>첫째</li> <li class="two">둘째</li> <li id="third">셋째</li> </ul> </div> <span class="two">넷다섯</span>
css >
* { font-size: 30px; } li.two { color: navy; } li#third { color: purple; }
NAME > other
: 자식 선택자 (Child Comninator)
: 선택자NAME
의 자식요소other
선택.예시 )
html ><div> <ul> <li>첫째</li> <li class="orange">둘째</li> <li id="red">셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } ul > li { color: blue; } ul > .orange { color: orange; } ul > #red { color: red; }
NAME other
: 하위 선택자 (Descendant Comninator)
: 선택자NAME
의 하위 요소other
선택.예시 )
html ><div> <ul> <li>첫째</li> <li class="orange">둘째</li> <li id="red">셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } div li { color: blue; } ul .orange { color: orange; } div #red { color: red; }
NAME + other
: 인접 형제 선택자 (Adjacent Sibling Combinator)
: 선택자NAME
의 다음 형제 요소other
하나 선택.예시 )
html ><div> <ul> <li id="first">첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } #first + li { color: orange; }
NAME ~ other
: 일반 형제 선택자 (General Sibling Combinator)
: 선택자NAME
다음 형제요소other
을 모두 선택.예시 )
html ><div> <ul> <li id="first">첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } #first ~ li { color: red; }
NAME:hover
: 선택자
NAME
요소에 마우스 커서가 올라가 있는 동안 선택됨.예시 )
html ><div> <ul> <li class="first">첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } .first:hover { color: purple; }
off
on
NAME:active
: 선택자
NAME
요소를 마우스로 클릭하고 있는 동안만 선택됨.예시 )
html ><div> <ul> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span class="ff">넷다섯</span>
css >
* { font-size: 30px; } .ff:active { color: blue; }
off
on
NAME:focus
: 선택자
NAME
요소가 포커스 되면 선택됨.예시 )
html ><div> <ul> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <input type="text" />
css >
* { font-size: 30px; } input { border-radious: 15px; background-color: darkgreen; }
NAME:first-child
: 선택자
NAME
가 형제 요소 중 첫째라면 선택.예시 )
html ><div> <ul> <li class="first">첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } div .first:first-child { color: brown; }
NAME:last-child
: 선택자
NAME
가 형제 요소 중 막내라면 선택.예시 )
html ><div> <ul> <li>첫째</li> <li>둘째</li> <li class="last">셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } ul > .last:last-child { color: red; }
NAME:nth-child
: 선택자
NAME
가 형제 요소 중 N번째라면 선택.예시 )
html ><div> <ul> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> </div> <span>넷다섯</span>
css >
* { font-size: 30px; } li:nth-child(2n+1) { color: beige; }
NAME:not(other)
: 선택자가
other
가 아닌NAME
요소 선택.예시 )
html ><div> <ul class="num"> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> <span>넷다섯</span> </div>
css >
* { font-size: 30px; } span:not(.num) { color: green; }
NAME::before
: 선택자
NAME
의 내부 앞에 내용 삽입.
: 필수 = content예시 )
<span> 이것은 내용~! </span> <span> 이것도 내용~! </span>
* { font-size: 30px; } span::before { content: "짜잔!"; }
NAME::after
: 선택자
NAME
의 내부 뒤에 내용 삽입.
: 필수 = content예시 )
<span> 이것은 내용~! </span>
* { font-size: 30px; } span::after { content: "짜잔!"; }
[NAME]
: 속성
NAME
을 포함하고 있는 요소 선택.예시 )
<div> <ul class="num"> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> <span class="ff">넷다섯</span> </div>
* { font-size: 30px; } [class] { color: blue; }
[NAME=other]
: 속성
NAME
을 포함하고 값이other
인 요소 선택.예시 )
<div> <ul class="num"> <li>첫째</li> <li>둘째</li> <li>셋째</li> </ul> <span class="ff">넷다섯</span> </div>
* { font-size: 30px; } [class="ff"] { color: red; }
- !important
- 인라인 선언
- ID선택자 ( 100 )
- Class선택자 ( 10 )
- 태그선택자 ( 1 )
예시 )
.list li.num { color: red;}
- 21
.list li:active { color: red;}
- 21
.list li::before { content: "hello";}
- 12
#list li { color: red;}
- 101
li:not(.num) { color: red;}
- 10
우선순위 명시도 계산에 관해서는 아직도 헷갈리기도 하지만 그래도 아무것도 몰랐을 때 왜 이 css적용이 안될까 하던 의문의 해답을 알기에는 충분하다.
또, 여러 css 선택자를 알게되면서 예전에 쓰던 것만 쓰던 때와 달리 좀더 css 세부적으로 적용할 수 있게 되었다는 것에 대해 만족한다.