CSS

[CSS] Pseudo Selectors

기록하는_사람 2022. 9. 14. 23:50

Pseudo Selectors

📌 Pseudo Selectors

: 세부적으로 요소를 선택.

 

Pseudo Selectors - :

📌 :

① div : first-chid { } → div의 가장 처음에 있는 자식 요소.

② div : last-chid { } → div의 가장 마지막에 있는 자식 요소.

③ div : nth-child(n) { } → div의 n번째에 있는 자식 요소.

    💡 even(= 2n) : 짝수, odd(= 2n + 1) : 홀수, 3n 등 사용 가능.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 기본 형식</title>
        <link href="styles.css" rel="stylesheet"/>
        <style>
            html {
                background-color: blanchedalmond;
            }
            body {
                height: 100vh;
                margin: 20px;
            }
            div { 
                height: 50px;
                width: 50px;
                background-color: darkgray;
                color: white;
            }
            div:first-child{
                background-color: darkred;
            }
            div:nth-child(even){
                background-color: darkorange;
            }
            div:nth-child(3),
            div:nth-child(5){
                background-color: darkseagreen;
            }
            div:last-child{
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </body>
</html>

+ 추가 설명

더보기

            div { 
                height: 50px;
                width: 50px;
                background-color: darkgray;
                color: white;
            }
            div:first-child{
                background-color: darkred; → ①
            }
            div:nth-child(even){
                background-color: darkorange; → ②, ④, ⑥, ⑧
            }
            div:nth-child(3),
            div:nth-child(5){
                background-color: darkseagreen; → ③, ⑤
            }
            div:last-child{
                background-color: darkgreen; → ⑨
            }

 

Pseudo Selectors - ' ', ' > ', ' + ', ' ~ '

📌 ' ', '>', '+', '~'

① ' ' : 해당하는 모든 자식 요소.

② > : 바로 아래의 자식 요소.

③ + : 바로 다음에 위치한 형제 요소.

④ ~ : 다음에 오는 요소. 바로 다음에 오지 않아도 가능.

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 기본 형식</title>
        <link href="styles.css" rel="stylesheet"/>
        <style>
            html {
                background-color: blanchedalmond;
            }
            body {
                height: 100vh;
                margin: 20px;
            }
            span {
                background-color: azure;
                color: mediumturquoise;
                padding: 5px;
                border-radius: 10px;
            }
            div span {
                text-decoration: underline;
            }
            div > span {
                color: pink;
            }
            span + p {
                color: black;
            }
            span ~ address {
                color: brown;
            }
        </style>
    </head>
    <body>
        <div>
            <span>_world</span>
            <p>
                마치 천국의 déjà vu 지금부터 난 널 만나 interview 
                네가 원한 모든 걸 다 줄 수가 있어 너의 어두운 모습까지도
                Come, come into <span>my world</span>
            </p>
            <address>home</address>
        </div>
    </body>
</html>

+ 추가 설명

더보기

            span {
                background-color: azure;
                color: mediumturquoise;
                padding: 5px;
                border-radius: 10px;
            }
            div span {
                text-decoration: underline; → div 아래의 모든 span에 적용.('_world', 'my world')
            }
            div > span {
                color: pink; → div 바로 아래의 span에만 적용.('_world')
            }
            span + p {
                color: black; → span 바로 다음에 오는 p에만 적용.('마치 천국의...')
            }
            span ~ address {
                color: brown; → span 다음에 오는 address에 적용.(address)
            }

 

Pseudo Selectors - [ ]

📌 [ ]

<!DOCTYPE html>
<html>
    <head>
        <title>HTML 기본 형식</title>
        <link href="styles.css" rel="stylesheet"/>
        <style>
            html {
                background-color: blanchedalmond;
            }
            body {
                height: 100vh;
                margin: 20px;
            }
            input {
                border: 3px solid darkgreen;
            }
            input:required {
                border-color: tomato;
            }
            input[type="password"] {
                background-color: lightskyblue;
            }
            input[placeholder~="name"] {
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div>
            <form>
                <input type="text" placeholder="First name"/>
                <input type="text" placeholder="Last name"/>
                <input type="password" required placeholder="password"/>
            </form>
        </div>
    </body>
</html>

+ 추가 설명

더보기

            input {
                border: 3px solid darkgreen;
            }
            input:required {
                border-color: tomato; → input에 required가 있는 요소.(password)
            }
            input[type="password"] {
                background-color: lightskyblue; → input의 type이 password인 요소.(password)
            }
            input[placeholder~="name"] {
                background-color: orange; → input의 placeholder에 name이 들어간 모든 요소.(First name, Last name)
            }