1. 구조 의사 클래스(structural pseudo-class)

  - HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택한다.

  • first-child
  • last-child
  • nth-child
  • nth-last-child
  • first-of-type
  • last-of-type
  • nth-of-type
  • nth-last-of-type
  • only-child
  • only-of-type
  • empty
  • root

 

1-1 first-child

<style>
    p:first-child {color: blue;}
    div.a {border: solid 2px green; width: 200px;}
    div.b {border: solid 2px orange;}
</style>
<body>
    <h1>first-child</h1>
    <div class="a">
        <p>첫 번째 요소</p>
        <p>두 번째 요소</p>
        <div class="b">
            <p>첫 번째 요소</p>
            <p>두 번째 요소</p>
        </div>
    </div>
</body>

- 모든 자식 요소 중 맨 앞에 위치하는 자식 요소를 선택한다.

 

1-2 last-child

<style>
    p:last-child {color: blue;}
    div.a {border: solid 2px green; width: 200px;}
    div.b {border: solid 2px orange;}
</style>
<body>
    <h1>last-child</h1>
    <div class="a">
        <div class="b">
            <p>첫 번째 요소</p>
            <p>두 번째 요소</p>
        </div>
        <p>첫 번째 요소</p>
        <p>두 번째 요소</p>
    </div>
</body>

  - 모든 자식 요소 중 맨 마지막에 위치하는 자식 요소를 선택한다.

  - </div> 위에 있는 요소가 마지막에 위치하는 자식 요소다.

 

1-3 nth-child

<style>
    div {
        border: solid 1px black;
        width: 140px;
        overflow: auto;
    }
    p:nth-child(2n){color: blue;}
</style>
<body>
    <h1>nth-child</h1>
    <div>
        <p>첫 번째 요소</p>
        <p>두 번째 요소</p>
        <p>세 번째 요소</p>
        <p>네 번째 요소</p>
        <p>다섯 번째 요소</p>
        <p>여섯 번째 요소</p>
    </div>
</body>

  - 모든 자식 요소 중 n번째에 위치하는 자식 요소를 모두 선택한다.

 

1-4 nth-last-child

<style>
    div {
        border: solid 1px black;
        width: 140px;
        overflow: auto;
    }
    p:nth-last-child(2n){color: blue;}
</style>
<body>
    <h1>nth-last-child</h1>
    <div>
        <p>첫 번째 요소</p>
        <p>두 번째 요소</p>
        <p>세 번째 요소</p>
        <p>네 번째 요소</p>
        <p>다섯 번째 요소</p>
    </div>
</body>

  - 모든 자식 요소 중 뒤에서부터 n번째에 위치하는 자식 요소를 모두 선택한다.

 

1-5 first-of-type

<style>
    p:first-of-type {color: blue;}
    div.a {border: solid 2px green; width: 200px;}
    div.b {border: solid 2px orange;}
    span {color: silver;}
</style>
<body>
    <h1>first-of-type</h1>
    <div class="a">
        <div class="b">
            <span><p>첫 번째 타입</p></span>
            <p>첫 번째 타입</p>
        </div>
        <p>첫 번째 타입</p>
        <p>두 번째 타입</p>
    </div>
</body>

  - 모든 자식 요소 중 맨 처음으로 등장하는 특정 타입의 요소를 선택한다.

 

1-6 last-of-type

<style>
    p:last-of-type {color: blue;}
    div.a {border: solid 2px green; width: 200px;}
    div.b {border: solid 2px orange;}
    span {color: silver;}
</style>
<body>
    <h1>last-of-type</h1>
    <div class="a">
        <div class="b">
            <span><p>첫 번째 타입</p></span>
            <p>첫 번째 타입</p>
        </div>
        <p>첫 번째 타입</p>
        <p>두 번째 타입</p>
    </div>
</body>

  - 모든 자식 요소 중 맨 마지막에 등장하는 특정 타입의 요소를 모두 선택한다.

  

1-7 nth-of-type

<style>
    div {
        border: solid 1px black;
        width: 140px;
        overflow: auto;
    }
    p:nth-of-type(2n){color: blue;}
    span:nth-of-type(2n){color: gray;}
    
</style>
<body>
    <h1>nth-last-of-type</h1>
    <div>
        <span>span 첫 번째 타입</span>
        <p>p 첫 번째 타입</p>
        <span>sapn 두 번째 타입</span>
        <p>p 두 번째 타입</p>
        <span>span세 번째 타입</span>
        <p>p 세 번째 타입 </p>
        <span>span 네 번째 타입</span>
        <p>p 네 번째 타입</p>
    </div>
</body>

  - 모든 자식 요소 중 n번째로 등장하는 특정 타입의 요소를 모두 선택한다.

 

1-8 nth-last-of-type

<style>
    div {
        border: solid 1px black;
        width: 140px;
        overflow: auto;
    }
    p:nth-last-of-type(2n){color: blue;}
    span:nth-last-of-type(2n){color: gray;}
    
</style>
<body>
    <h1>nth-last-of-type</h1>
    <div>
        <span>span 첫 번째 타입</span>
        <p>p 첫 번째 타입</p>
        <span>sapn 두 번째 타입</span>
        <p>p 두 번째 타입</p>
        <span>span세 번째 타입</span>
        <p>p 세 번째 타입 </p>
        <span>span 네 번째 타입</span>
        <p>p 네 번째 타입</p>
    </div>
</body>

  - 모든 자식 요소 중 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택한다.

 

1-9 only-child

<style>
    p:only-child{color: red;}
    div{border: solid 2px black; width: 174px;}
</style>
<body>
    <h1>only-child</h1>
    <div>
        <p>div 태그의 유일한 요소</p>
    </div>
    <div>
        <p>div 태그의 첫 번째 요소</p>
        <p>div 태그의 두 번째 요소</p>
    </div>
    <div>
        <p>div 태그의 유일한 요소</p>
    </div>
</body>

  - 자식 요소를 단 하나만 가지는 요소의 자식 요소를 모두 선택한다.

 

1-10 only-of-type

<style>
    p:only-of-type{color: red;}
    div{border: solid 2px black; width: 180px;}
</style>
<body>
    <h1>only-of-type</h1>
    <div>
        <p>div 태그의 유일한 요소</p>
    </div>
    <div>
        <p>div 태그의 첫 번째 요소</p>
        <p>div 태그의 두 번째 요소</p>
    </div>
    <div>
        <span>span 태그의 유일한 요소</span>
    </div>
</body>

  - 특정 타입의 요소 단 하나만을 가지는 요소의 자식 요소를 모두 선택한다.

 

1-11 empty

<style>
    p:empty{background-color: blue; width: 300px; height: 30px;}
    div{border: solid 2px black; width: 180px; overflow: hidden;}
</style>
<body>
    <h1>empty</h1>
    <div>
        <p></p>
    </div>
    <div>
        <p>div 태그의 유일한 요소</p>
    </div>
    <div>
        <p></p>
    </div>
</body>

  - 자식 요소를 전혀 가지고 있지 않은 요소를 모두 선택한다.

 

1-12 root

<style>
    :root {background-color: gray;}
</style>
<body>
    <h1>root</h1>
</body>

  - 해당 문서의 root 요소를 선택한다.

  - HTML 문서에서 root 요소는 언제나 html 요소다.

'FrontEnd > Css' 카테고리의 다른 글

[CSS] 속성 선택자(attribute selectors)  (0) 2021.08.01
[CSS] 의사 요소(pseudo-element)  (0) 2021.07.31
[CSS] float  (0) 2021.07.30
[CSS] position, z-index  (0) 2021.07.29
[CSS] display, visibility, opacity  (0) 2021.07.27