알아두면 좋은 CSS 선택자

2020. 8. 27. 19:46

알쓸(알아두면 쓸만한) CSS 선택자

CSS선택자 하면 떠오르는 선택자는 id, class 정도가 있고 자식, 자손에 대한 기초를 알고 있으실 겁니다.

하지만 꼭 알아두면 좋은 선택자 30가지에 대해서 전부 알고계시지는 않을겁니다.

(만약 알고계신다면... 돌아가셔도 좋습니다 ㅠ.ㅠ)

저도 열심히 암기하기위해 정리하고 있습니다.

그럼 지금부터 정리한 것들을 조금씩 설명 드리겠습니다.

1. *

별표는 전체요소를 대상으로 합니다. ( reset.css 등에서 많이 보았습니다. 다만 사용하지말라고 권하네요)

2. #

id선택자입니다.
가장 흔하고 쉽게 사용됩니다.

3. .

class를 선택할때 사용합니다.

4. li a

자손 선택자 입니다.
더 상세히 작업해야 할 때 이 선택자를 사용합니다.

5. a

태그 선택자입니다.
특정 태그 전체를 대상으로 해야할때 사용합니다.

6. a:link / a:visited

클릭하기전 상태와 크릭한 후 상태를 대상으로 하기위해 :link , :visited 가상클래스를 사용합니다.

7. +

인접 선택자입니다.

1
2
3
4
5
6
7

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
</ul>
<p> P 태그 </p>

이렇게 적용된 모습을 확인 할 수 있습니다.

8. >

>는 직계 자식만 선택합니다.

예를 들면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<header>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
            <li>
                E
                <ul>
                    <li>E-1</li>
                    <li>E-2</li>
                    <li>E-3</li>
                </ul>
            </li>
        </ul>
</header>

이러한 마크업일때 , CSS를

1
2
3

header ul{
    border: 1px solid red;
}

이렇게 코드를 작성 한다면,

이렇게 li의 자식인 ul까지 border가 생성됩니다.

그렇지만

1
2
3

header>ul{
    border: 1px solid red;
}

이렇게 작성한다면

직계 자식만 CSS가 적용된 것을 볼 수 있습니다.

9. ~

형제 선택자는 인접선택자와 비슷하지만 덜 엄격합니다.
인접선택자는 바로 뒤에오는 첫번째 요소만 적용되지만, 형제선택자는 뒤에오는 모든 요소를 선택합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>
    ul~p{
        color:green;
    }
</style>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<p>AA</p>
<p>BB</p>
<p>CC</p>


 

10. [title]

속성 선택자입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[title]{
            color:green;
        }
    </style>
</head>
<body>
    <a href="#" title="naver">naver</a>
    <a href="#">daum</a>
    <a href="#">google</a>
</body>
</html>

11. [href=""]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href="https://google.com"]{
            color:green;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>


 

href속성으로도 찾을 수 있습니다. 하지만 이렇게 적용하기에는 너무 융통성이 없습니다.

그렇기 때문에 우리는 약간의 정규식 표현을 사용할 수 있습니다.

**12. [href*=""]**

*는 입력값이 속성값안 어딘가에 있는것을 의미합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href*="google"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

* => 0개 이상의 문자를 포함합니다. a*b 는 ab, abb, aab, aababa 등을 포함합니다.

13. [href^="http"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href^="http"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>


문자열의 시작을 표기하는 정규표현식에서 흔하게 사용됩니다.
href^="http" => http로 시작하는 href를 의미하게 됩니다.
^ = 문자열이나 행의 처음을 의미합니다.
 
 
14. [href$=""]$는 ^와는 반대로 문자열이나 행의 끝을 의미합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        a[href$="net"]{
            color:green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <a href="https://naver.com" title="naver">naver</a>
    <a href="https://daum.net">daum</a>
    <a href="https://google.com">google</a>
</body>
</html>

15. :checked

이 가상 클래스는 체크박스나 라디오버튼처럼 체크가되는 사용자 인터페이스 요소만을 대상으로 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        input[type=radio]:checked+label{
            color:red;        
 
        }
    </style>
</head>
<body>
    <form action="/" method="post">
        <input type="radio" name="checkRadio" value="checkRadio" />
        <label>체크하면 색깔 바뀜!</label>
    </form>
</body>
</html>

16. ::before / ::after

befor 과 after 가상요소는 선택된 요소 주변에 콘텐츠를 생성합니다.
이 클래스는 여러가지 방법으로 활용할 수 있습니다.

gnb 구분 bar 넣기
앞, 뒤에 추가적인 정보를 넣기
float 해제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul{
            list-style:none;
        }
        nav li {
            float: left;
            margin-right: 30px;
        }
        nav li:before{
            content:"our ";
        }
        nav li:after{
            content:"ㅣ";
            padding-left:30px;
        }
        nav li:after:first-child{
            content:"";
        }
        nav ul:after{
            display:block;
            clear:both;
            content:"";
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Home</li>
            <li>Address</li>
            <li>Location</li>
        </ul>
    </nav>
</body>
</html>


17. :hover사용자가 요소위에 커서를 올릴때 스타일을 적용합니다.
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p:hover{
            color:red;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <p>마우스를 올리면 색깔이 변함</p>
</body>
</html>


 
18. :not특정 태그만 제외한 모든 요소를 선택하고 싶을때 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p:not(#number){
            color:red;
        }
    </style>
</head>
<body>
    <p id="number">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>
</html>


 
 
19. ::가상요소첫번째줄이나 첫글자와 같이 요소 일부분에 스타일을 적용할 수 있습니다.
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p::first-letter{
            margin-left: 30px;
            font-size:24px;
            font-weight:bold;
            color:blue;
        }
        p::first-line{
            color:green;
        }
    </style>
</head>
<body>
    <p>가상요소는 ::로 표현합니다 <br />
    꼭 block요소에 적용해야합니다.</p>
</body>
</html>

20. :nth-child(n) / :nth-last-child(n)

여러 요소중에서 특정 요소만 지목하는 방법입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        li:nth-child(7){
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
    </ul>
</body>
</html>


 

이렇게 숫자를 사용하여 표현할 수 있고 만약 짝수번째마다 필요하다면

1
2
3
4
5

    <style>
        li:nth-child(2n){
            color:red;
        }
    </style>


 

이렇게 사용도 가능합니다.

:nth-last-child(n)는

21. :nth-of-type(n) / :nth-last-of-type(n)

child요소가 아닌 type을 선탁할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul:nth-of-type(3){
            border: 2px solid black;   
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>ㄱ</li>
        <li>ㄴ</li>
        <li>ㄷ</li>
        <li>ㄹ</li>
        <li>ㅁ</li>
    </ul>
</body>
</html>


 

:nth-of:type도 마찬가지로 거꾸로 순서가 적용되는 :nth-last-of-type(n)도 사용 가능합니다.

22. :first-child / :last-child

요소의 첫번째 또는 마지막 자식만 대상으로 삼을 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        ul{
            list-style:none;
        }
        ul li{
            border-top: 1px solid black;
            text-align:center;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

뭔가 어색함을 느씰 수 있습니다.

A위에 선이 없다면 더욱 예뻐보일것 입니다.

우리는 A에게 따로 class를 주고 border: none; 을 사용해도 되지만

1
2
3
4
5
6
7
8
9
10
11
12

    <style>
        ul{
            list-style:none;
        }
        ul li{
            border-top: 1px solid black;
            text-align:center;
        }
        li:first-child{
            border:none;
        }
    </style>


이렇게 first-child를 사용하여 테두리를 없앨 수 있습니다.

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기 (0)	2020.08.27
[CSS] CSS 기초설명, Cascading 이란? (0)	2020.08.27
[HTML] HTML 기초설명 (0)	2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다 (0)	2020.08.27
[자바스크립트]Virtual Dom이란? (0)	2020.08.27

런코딩