CSS Selector

CSS

이번 포스트에서는 다양한 CSS Selector에 대해 알아보도록 하겠습니다.


기초 선택자

기초 선택자에는 다음과 같다.

  1. 태그(Tag) 선택
  2. 아이디(ID) 선택
  3. 클래스(Class) 선택
  4. 자식(child) 선택
  5. 자손(descendants) 선택
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* tag 선택 */
    div{border:1px solid #000;margin:10px;}

    /* id 선택 */
    #box{background:#09F;}

    /* class 선택 */
    .boxs{font-size:30px;}

    /* 자손 선택 */
    .boxs span {color:#90F}

    /* 자식 선택 */
    .boxs>span {background:#FFF;color:#09F}
  </style>
</head>
<body>
<div id="box" class="boxs">
  첫 번째 div <br>
  이것은 <span> .boxs 밑에 있는 span 입니다. </span>
  <p>
    이것은 <span>.boxs 밑에 있는 p 밑에 있는 span 입니다.</span>
  </p>
</div>
<div class="boxs">
  두 번째 div
  <p>
    이것은 <span>.boxs 밑에 있는 p 밑에 있는 span 입니다.</span>
  </p>
</div>
<div>세 번째 div</div>
<div class="boxs">네 번째 div</div>
</body>
</html>

위의 소스코드와 결과물을 통해 알 수 있는 사실은 다음과 같습니다.

  • id를 선택하기 위해서는 '#(샵)' 키워드를 사용한다.
  • class를 선택하기 위해서는 '.(점)' 키워드를 사용한다.
  • tag에 id와 class를 중첩하여 사용할 수 있다.
  • 자손선택보다 자식선택의 우선순위가 높다.
  • id는 한 페이지에 한 개만 존재해야 한다.
  • class는 한 페이지에 여러 개 존재할 수 있다.

위의 5가지는 제일 기초가 되는 선택자입니다. 그리고 위의 5가지만 제대로 알고 있어도 CSS를 충분히 효율적으로 이용할 수 있습니다.



복합 선택자

복합 선택자는 키워드가 복합적인 것들을 의미합니다.

  • + : 친구(friend) 선택
  • ~ : 친구들(friends) 선택
  • , : 다중(multi) 선택
  • :nth-child(n) : n 번째 태그 선택
  • :first-child : 첫번째(first) 요소 선택
  • :last-child : 마지막(last) 요소 선택
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

    .box { margin:10px; border:1px solid #000;}

    /* 친구 선택*/
    div+span{background:#ffa}

    /* 친구들 선택 */
    div~p{background:#faf;}

    /* .a, .b, .c 선택 */
    .a,
    .b,
    .c{font-size:30px;}


    /* .box의 3번 div 선택 */
    .box div:nth-child(3){color:#f00;}

    /* .box의 1번 요소 선택 */
    .box div:first-child{color:#0f0;}

    /* .box의 마지막 요소 선택 */
    .box div:last-child{color:#00f;}

    /* box2의 짝수 번째에 해당하는 요소 선택 */
    .box2 div:nth-child(2n){color:#7f7;}

    /* body 내부의 모든 2번 태그들 */
    body :nth-child(2){color:#a0f;}

    /* body 내부의 모든 1번 태그들 */
    body :first-child{color:#f0f;}

    /* body 내부의 모든 마지막 태그들 */
    body :last-child{color:#0ff;}
  </style>
</head>
<body>
  <div class="box"> <!-- :first-child에 영향을 받음 -->
    1번 .box
    <div>1번 .box의 1번 div 입니다.</div>
    <div>1번 .box의 2번 div 입니다.</div>
    <div>1번 .box의 3번 div 입니다.</div>
    <div class="a">1번 .box의 4번 div 입니다.</div>
    <div>1번 .box의 5번 div 입니다.</div>
    <div class="b">1번 .box의 6번 div 입니다.</div>
    <div>1번 .box의 7번 div 입니다.</div>
    <div class="c">1번 .box의 8번 div 입니다.</div>
    <div>1번 .box의 9번 div 입니다.</div>
    <div>1번 .box의 10번 div 입니다.</div> <!-- .box div:last-child에 영향을 받음 -->
  </div>
  <div class="box"> <!-- :nth-child(2)에 영향을 받음 -->
    2번 .box
    <div>2번 .box의 1번 div</div>
    <div>2번 .box의 2번 div</div>
    <div>2번 .box의 3번 div</div>
    <div>2번 .box의 4번 div</div>
    <div>2번 .box의 5번 div</div>
    <div>2번 .box의 6번 div</div>
    <div>2번 .box의 7번 div</div>
    <div>2번 .box의 8번 div</div>
    <div>2번 .box의 9번 div</div>
    <div>2번 .box의 10번 div</div> <!-- .box div:last-child에 영향을 받음 -->
  </div>
  <span>div 옆에 있는 span</span> <!-- div + span의 영향을 받음  -->
  <p>div 옆에 있는 1번 p</p>  <!-- div ~ p 의 영향을 받음 -->
  <p>div 옆에 있는 2번 p</p>  <!-- div ~ p 의 영향을 받음 -->
  <p>div 옆에 있는 3번 p</p>  <!-- div ~ p 의 영향을 받음 -->
  <p>div 옆에 있는 4번 p</p>  <!-- div ~ p 의 영향을 받음 -->
  <div class="box2">
    <div>.box2의 1번째 div</div> <!-- :first-child에 영향을 받음 -->
    <div>.box2의 2번째 div</div> <!-- :nth-child(2n)에 영향을 받음 --> 
    <div>.box2의 3번째 div</div>
    <div>.box2의 4번째 div</div> <!-- :nth-child(2n)에 영향을 받음 -->
    <div>.box2의 5번째 div</div>
    <div>.box2의 6번째 div</div> <!-- :nth-child(2n)에 영향을 받음 -->
    <div>.box2의 7번째 div</div> <!-- :last-child 에 영향을 받음 -->
  </div>
  <span>body의 마지막 태그</span>  <!-- div+span과 :last-child 에 영향을 받음 -->
</body>
</html>

:nth-child와 :first-child, :last-child 앞에 tag, id, class 등의 키워드가 없다면 모든 태그를 기반으로 선택됩니다.

  • div :first-child 를 선택할 경우 모든 div의 자손 중 첫번째 요소들을 모두 선택합니다.
  • div span:first-child 를 선택할 경우, div의 자손 중 span이면서 첫번째 요소들을 모두 선택합니다.

그리고 nth-child 같은 경우 짝수, 홀수, 선택 패턴 등을 지정할 수 있습니다.

  • div:nth-child(2n) : 짝수 요소 선택
  • div:nth-child(2n-1) : 홀수 요소 선택
  • div:nth-child(3n) : 3의 배수 선택
  • div:nth-child(2n+1) : 첫번째 요소를 제외한 홀수 요소 선택


기타 선택자

  1. * : 모든 태그(all) 선택
  2. [attribute="value"] : 속성(attribute) 선택
  3. 가상 선택자
    • :hover 마우스 올렸을 때
    • :active 마우스 누르고 있을 때
    • :before 태그 맨 앞에 가상 요소 추가
    • :after 태그 맨 뒤에 가상 요소 추가
    • a:visited 방문 했던 링크
    • a:link 방문 하지 않은 링크
    • :focus 입력 포커스가 있는 상태
    • :checked input이 check 된 상태
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 모든 태그 선택 */
    * {margin:0;padding:0;}

    /* 속성 선택 */
    span[title="test"]{font-size:20px;}
    input[type="text"]{height:50px;width:200px;background:#09F;color:#fff;}
    input[type="password"]{height:50px;width:150px;background:#f09;color:#fff;}

    /* 기본 선택자 */
    .box{margin:10px;padding:10px;}
    .box a{color:inherit;text-decoration:none;}

    /* 가상 선택자 */
    .box:target{background:#000;color:#fff;} /* 주소에서 .box를 가르킬 때 */
    .box a:visited{color:#f00;} /* 방문했던 링크 */
    .box a:link{color:#00f;} /* 방문하지 않았던 링크 */
    .box a:hover{color:#09F;}  /* 마우스 올렸을 때 */
    .box a:active{color:#90f;} /* 마우스를 누르고 있을 때 */
    .box:before{content:"before 입니다";border:1px solid #000;} /* .box의 맨 앞에  요소 추가 */
    .box:after{content:"after 입니다";border:1px dashed #f00;} /* .box의 맨 뒤에 요소 추가 */
    input:focus{background:#000;} /* cursor가 input에 있을 때 */
    input:checked+span{color:#09F;} /* checked 상태의 input 옆에 있는 span */

  </style>
</head>
<body>
  <div>div입니다</div>
  <ul>
    <li>ul의 1번 li</li>
    <li>ul의 2번 li</li>
  </ul>
  <div>
    [input type text]
    <input type="text" placeholder="입력해보세요">
  </div>
  <div>
    [input type password]
    <input type="password" placeholder="입력해보세요">
  </div>
  <div>
    [input type checkbox]
    <input type="checkbox">
    <span>checkbox 선택</span>
  </div>
  <div class="box" id="box">
    <p>.box 입니다.</p>
    <p><a href="http://naver.com">네이버로 이동</a></p>
    <p><a href="#box">#box로 이동</a></p>
    <p><a href="http://junil-hwang.com">개발자 황준일 블로그</a></p>
  </div>
</body>
</html>

이외에도 굉장히 많은 가상 선택자가 있습니다. 하지만 위에 있는 내용만 알아도 충분합니다.




최종 정리

Selector Example 예제 설명
.class .intro class="intro"인 모든 요소를 ​​선택합니다.
#id #firstname id="firstname"인 요소를 선택합니다.
* * 모든 요소를 ​​선택합니다.
element p 모든 <p> 집단
element,element div, p 모든 <div> 요소 및 모든 <p> 집단
element element div p 모든 <p> <div> 내부 요소 집단
element>element div > p 모든 <p> 부모 요소가 <div> 요소
element+element div + p 모든 <p> <div> 요소 바로 뒤에있는 요소 집단
element1~element2 p ~ ul 모든 <ul> 요소 앞에 <p> 요소
[attribute] [target] 대상 속성이있는 모든 요소를 ​​선택합니다.
[attribute=value] [target=_blank] target="_blank"가있는 모든 요소를 ​​선택합니다.
[attribute~=value] [title~=flower] "flower"이라는 단어가 포함 된 제목 속성이있는 모든 요소를 ​​선택합니다.
[attribute|=value] [lang|=en] "en"으로 시작하는 lang 속성 값을 가진 모든 요소를 ​​선택합니다.
[attribute^=value] a[href^="https"] <a> href 속성 값이 "https"로 시작하는 요소
[attribute$=value] a[href$=".pdf"] <a> href 속성 값이 ".pdf"로 끝나는 요소
[attribute*=value] a[href*="w3schools"] <a> href 속성 값에 하위 문자열 "w3schools"이 포함 된 요소
:active a:active 활성 링크를 선택합니다.
::after p::after 각 <p> 요소
::before p::before <p>의 내용을 & nbsp; 앞에 삽입하십시오. 요소
:checked input:checked 모든 체크 된 <input> 요소
:default input:default 기본 <input> 요소
:disabled input:disabled 모든 비활성화 된 <input> 요소
:empty p:empty 모든 <p> 자식이없는 요소 (텍스트 노드 포함)
:enabled input:enabled 사용 설정된 모든 <input> 요소
:first-child p:first-child 모든 <p> 부모의 최초의 아이 인 요소
::first-letter p::first-letter 모든 <p> 요소
::first-line p::first-line 모든 <p> 요소
:first-of-type p:first-of-type 모든 <p> 요소 인 <p> 그 부모의 요소
:focus input:focus 포커스가있는 입력 요소를 선택합니다.
:hover a:hover 마우스 오버시 링크 선택
:in-range input:in-range 지정된 범위 내의 값을 가진 입력 요소를 선택합니다.
:indeterminate input:indeterminate 불확정 상태에있는 입력 요소를 선택합니다.
:invalid input:invalid 값이 잘못된 모든 입력 요소를 선택합니다.
:lang(language) p:lang(it) 모든 <p> lang 속성이 "it"인 요소 (이탈리아어)
:last-child p:last-child 모든 <p> 부모의 마지막 자식 엘리먼트
:last-of-type p:last-of-type 모든 <p> 마지막 <p> 요소 인 요소 그 부모의 요소
:link a:link 방문하지 않은 모든 링크를 선택합니다.
:not(selector) :not(p) <p> 요소가 아닌 모든 요소를 ​​선택합니다. 요소
:nth-child(n) p:nth-child(2) 모든 <p> 부모의 두 번째 자식 인 요소
:nth-last-child(n) p:nth-last-child(2) 모든 <p> 마지막 자식으로부터 세어 부모의 두 번째 자식 인 요소
:nth-last-of-type(n) p:nth-last-of-type(2) 모든 <p> 요소 인 제 2 <p> 마지막 자식으로부터 세어 그 부모의 구성 요소
:nth-of-type(n) p:nth-of-type(2) 모든 <p> 요소 인 제 2 <p> 그 부모의 요소
:only-of-type p:only-of-type 모든 <p> 요소 인 <p> 그 부모의 요소
:only-child p:only-child 모든 <p> 부모의 유일한 자식 인 요소
:optional input:optional "필수"속성이없는 입력 요소를 선택합니다.
:out-of-range input:out-of-range 지정된 범위 밖의 값을 가진 입력 요소를 선택합니다.
::placeholder input::placeholder 자리 표시 자 텍스트가있는 입력 요소를 선택합니다.
:read-only input:read-only "readonly"속성이 지정된 입력 요소를 선택합니다.
:read-write input:read-write "readonly"속성이 지정되지 않은 입력 요소를 선택합니다.
:required input:required "필수"속성이 지정된 입력 요소를 선택합니다.
:root :root 문서의 루트 요소를 선택합니다.
::selection ::selection 사용자가 선택한 요소의 부분을 선택합니다.
:target #news:target 현재 활성화 된 #news 요소를 선택합니다 (앵커 이름이 포함 된 URL을 클릭).
:valid input:valid 유효한 값을 가진 모든 입력 요소를 선택합니다.
:visited a:visited 방문한 모든 링크를 선택합니다.

추가로 CSS Diner 라는 게임이 있습니다. 해당 게임을 통하여 재밌고 빠르게 CSS Selector 학습이 가능합니다.
바로가기 : https://flukeout.github.io/



참고 링크