Selector 21.03.13

selector : 특정 태그명으로 선택

/* TagName { } */
h1 { }
/* 모든 h1 tag 선택 */
div { }
/* 모든 div tag 선택 */

all selector : 전체 선택.

/* * { } */
* { }
/* 모든 tag 선택 */

Tag : Tag명으로 중복 선택

/* 태그명, 태그명 { } */
section, h1 {}
/* 모든 scetion 태그와 모든 h1 태그 선택 */

ID Selector : id 명으로 선택

/* #id명 { } */

#only { }
/* #id 명이 only인 tag 선택 */

class Selector : class 명으로 선택 (같은 class 명을 가진 태그 모두 선택 가능)

/* .class명 { } */

.group { }
/* class 명이 group인 모든 tag 선택 */

attribute Selector : attribute를 기준으로 선택 (외울 필요는 없d음)

/* 태그명[어트리뷰트] */
a[href] { }
p[id="only"] { }
p[class~="out"] { }
/* 해당 태그의 속성 값이 [] 안에 있는 것과 같은 모든 태그 선택 */

후손 Selector : 기준태그 안에 있는 태그 선택

/* 기준태그 후손태그 {} */

header div {}
/* header 태그 안에 있는 div 선택 */

자식 Selector : 기준태그 한 단계 밑에 있는 태그 선택

/* 기준태그 > 자식태그 {} */

section > div {}
/* header 태그 바로 밑에 있는 div 선택 */

자식 Selector vs 후손 Selector

Header 태그 후손 : 안에 있는 모든 태그 (section, ul, li)
Header 태그 자식 : Section
<header> 
    Section 태그 후손 : 안에 있는 모든 태그 (ul, li)
    Section 태그 자식 : ul  
    <section>
        ul 태그 후손 : 안에 있는 모든 태그 (li)
        ul 태그 자식 : li
        <ul>
            li 태그 후손, 자식 : 없음
            li 태그 형제 : li
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section>
    <p>
    </p>
    <h1>
    </h1>
    <p>
    </p>
</header>

인접 형제 셀렉터 : 같은 높이에서 가장 가까운 태그 선택

기준 태그명 + 선택할 태그명
section + p {} : section 태그와 같은 레벨을 가진 가장 가까운 p 태그

형제 셀렉터 : 같은 높이에 있는 모든 선택 태그 선택

기준 태그명 + 선택할 태그명
section ~ p {} : section 태그와 높이가 같은 모든 p 태그

가상 클래스 : 가상클래스는 요소의 이벤트에 대응하기 위하여 미리 만들어 놓은 클래스

a:link { }
/* 방문한 적이 없는 링크 */
a:visited { }
/* 방문한 적이 있는 링크 */
a:hover { }
/* 마우스를 올려놨을때 */
a:active { }
/* 마우스를 클릭했을 때 */
a:focus { }
/* 포커스 되었을 때 (ex: input 창을 클릭했을때 깜빡깜빡) */
a:first 
/* 첫번째 요소 */
a:last 
/* 마지막 요소 */
a:first-child 
/* 첫번째 자식 */
a:last-child 
/* 마지막 자식 */
a:nth-child(2n+1) 
/* 홀수 번째 자식 */
a:nth-child(2n) 
/* 짝수 번째 자식 */

요소 상태 셀렉터

input:checked + span { }
/* input이 체크 된 상태 일 때 형제 중 가장 가까운 span tag 선택 */
input:enabled + span { }
/* input이 사용 가능한 상태 일 때 형제 중 가장 가까운 span tag 선택 */
input:disabled + span { }
/* input이 사용 불가능한 상태 일 때 형제 중 가장 가까운 span tag 선택 */

구조 가상 클래스 셀렉터 (외울 필요 없음)

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

nth-child vs nth-of-type

ex code

<div>
  <h1>Heading1</h1>
  <p>Lorem</p> red
  <p>ipsum</p> blue
  <p>dolor</p>
</div>

p:nth-child(2) { color: red; }
/* p의 부모 태그를 기준으로 2번째 태그 */

p:nth-of-type(2) { color: blue; }
/* p의 부모태그를 기준으로 p와 같은 태그를 가진 2번째 태그 */

부정 셀렉터

input:not([type="password"]) { }
/* attribute의 type이 password가 아닌 input 태그 선택 */
div:not(:nth-of-type(2)) { }
/* div 태그의 부모 태그를 기준으로 자식 중에 div 태그를 가진 2번째 태그를 제외한 div 태그 선택 */

정합성 확인 셀렉터 : 정합성 검증이 성공 또는 실패한 input 요소 또는 form 요소를 선택한다.

input[type="text"]:valid { }
/* input의 type이 text라면 해당 input 태그 선택*/
input[type="text"]:invalid { }
/* input의 type이 text가 아닌 input 태그 선택*/

Share this post