IT 개발노트

CSS3 선택자 기본 본문

기초튼튼/CSS

CSS3 선택자 기본

limsungju 2019. 2. 20. 12:00

1. CSS3 선택자 기본
1.1 선택자 개요
- 선택자는 특정한 HTML 태그를 선택할 때에 사용하는 기능
- 선택자를 사용해 태그를 선택하면 원하는 스타일과 기능을 적용할 수 있다.
- 스타일을 적용할 때에 선택자는 다음 위치에 사용한다.

1.2 전체 선택자
: HTML 문서 안의 모든 태그를 선택할 때는 전체 선택자를 사용한다.
- 전체 선택자

선택자 형태 

설명 

* 

HTML 페이지 내부의 모든 태그를 선택한다. 

- 다음 코드는 문서 안의 모든 태그의 color 속성을 red로 지정한다.
예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* 모든 태그의 color 속성을 red 키워드로 적용한다. */
        *{ color : red; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>


결과

1.3 태그 선택자
: 태그 선택자는 특정한 HTML 태그를 선택한다.
- 태그 선택자

선택자 형태 

설명 

태그 

특정한 태그를 선택합니다. 

- 다음 코드는 h1 태그와 p 태그를 선택한다.

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* h1 태그의 color 속성에 red 키워드를 적용한다. */
        h1 { color : red; }
        /* p 태그의 color 속성에 blue 키워드를 적용한다. */
        p { color : blue;}
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Nunc nisl turpis, aliquet et gravida non, facilisis a sem.</p>
</body>
</html>


결과

1.4 아이디 선택자와 클래스 선택자
1.4.1 아이디 선택자
: 아이디 선택자는 특정한 id 속성을 가지고 있는 태그를 선택한다.

선택자 형태 

설명 

#아이디 

아이디 속성을 가지고 있는 태그를 선택한다. 

예시

1
2
3
4
5
/* id 속성으로 header를 가지고 있는 태그의 스타일을 지정한다. */
#header {
    width: 800px; margin: 0 auto;
    background red;
}


1.4.2 클래스 선택자
: 클래스 선택자는 특정한 class 속성을 가지고 있는 태그를 선택한다.

선택자 형태 

설명 

.클래스 

특정한 클래스를 가지고 있는 태그를 선택한다. 

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* class 속성으로 select를 가지는 태그의 color 속성을 red 키워드로 적용합니다. */
        .select { color: red; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <ul>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li class="select">Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
</body>
</html>


결과

1.5 속성 선택자
: 속성 선택자는 특정한 속성을 가진 태그를 선택할 때 사용한다.
- 기본 속성 선택자
: 기본 속성 선택자는 특정한 속성의 존재 유무와 속성 값을 판별할 때에 사용한다.

선택자 형태 

설명 

선택자[속성] 

특정한 속성이 있는 태그를 선택한다. 

선택자[속성=값][속성=값] 

특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택한다. 

예시

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>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* input 태그 중에서 type 속성을 text로 갖는 태그의
           background 속성에 red 키워드를 적용한다. */
        input[type=text] { background: red; }
        /* input 태그 중에서 type 속성을 password로 갖는 태그의
           background 속성에 blue 키워드를 적용한다. */
        input[type=password] { background: blue; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <form>
        <input type="text" />
        <input tpye="password" />
    </form>
</body>
</html>


결과

1.5 속성 선택자
1.5.1 문자열 속성 선택자
: 문자열 속성 선택자는 태그가 가지고 있는 속성의 특정한 문자열을 확인한다.

선택자 형태

설명 

선택자[속성~=값] 

속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택한다. 

선택자[속성|=값]

속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택한다.

선택자[속성^=값]

속성 안의 값이 특정 값으로 시작하는 태그를 선택한다. 

선택자[속성$=값] 

속성 안의 값이 특정 값으로 끝나는 태그를 선택한다. 

선택자[속성*=값] 

속성 안의 값이 특정 값을 포함하는 태그를 선택한다. 

예시

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
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* img 태그 중에서 src 속성이 png로 끝나는 태그의
           border 속성에 3px solid red를 적용한다. */
        img[src$=png] { border: 3px solid red; }
        /* img 태그 중에서 src 속성이 jpg로 끝나는 태그의
           border 속성에 3px solid green를 적용한다. */
        img[src$=jpg] { border: 3px solid green; }
        /* img 태그 중에서 src 속성이 gif로 끝나는 태그의
           border 속성에 3px solid blue를 적용한다. */
           img[src$=jpg] { border: 3px solid blue; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <img src="jajp.png" width="200" height="300" />
    <img src="node.png" width="200" height="300" />
    <img src="ux.png" width="200" height="300" />
</body>
</html>


결과

1.6 후손 선택자와 자손 선택자
코드

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div>
        <h1>CSS3 Selector Basic</h1>
        <h2>Lorem ipsum</h2>
        <ul>
            <li>universal selector</li>
            <li>type selector</li>
            <li>id & class selector</li>
        </ul>
    </div>
</body>


- 이때 div태그의 자손과 후손은 다음과 같이 정의한다.

1.6.1 후선 선택자
: 후손 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자이다.

선택자 형태 

설명 

선택자A 선택자B 

선택자A의 후손에 위치하는 선택지B를 선택한다. 

- 사용법

1
2
3
4
5
6
7
/* id 속성으로 header를 가지는 태그의 후손 위치에 있는 h1 태그의
   color 속성을 red 키워드로 적용한다. */
#header h1 { color: red; }
/* id 속성으로 section을 가지는 태그의 후손 위치에 있는 h1 태그의
   color 속성을 orange 키워드로 적용한다. */
#section h1 { color: orange; }


1.6.2 자손 선택자
: 자손 선택자는 특정한 태그 아래에 있는 자손을 선택할 때 사용하는 선택자이다.

선택자 형태 

설명 

선택자A > 선택자B 

선택자A의 자손에 위치하는 선택자B를 선택한다. 

- 사용법

1
2
3
4
5
6
7
/* id 속성으로 header를 가지는 태그의 자손 위치에 있는 h1 태그의
   color 속성을 red 키워드로 적용한다. */
#header > h1 { color: red; }
/* id 속성으로 section을 가지는 태그의 자손 위치에 있는 h1 태그의
   color 속성을 orange 키워드로 적용한다. */
#section > h1 { color: orange; }


1.6.3 동위 선택자
사용법

1
2
3
4
5
6
7
<body>
    <ul>
        <li>CSS3 Selector Basic</li>
        <li>CSS3 Selector Basic</li>
        <li>CSS3 Selector Basic</li>
    </ul>
</body>


- 이때 li 태그와 동위 관계에 있는 태그는 다음과 같이 정의한다.

- 동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자이다.

선택자 형태 

설명 

선택자A + 선택자B 

선택자A 바로 뒤에 위치하는 선택자B를 선택한다. 

선택자A ~ 선택자B 

선택자A 뒤에 위치하는 선택자B를 선택한다. 

사용법

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>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* h1 태그 뒤에 위치하는 h2 태그의 color 속성에 red 키워드를 적용한다. */
        h1 + h2 { color: red; }
        /* h1 태그 뒤에 위치하는 h2 태그의 
           background-color 속성에 orange 키워드를 적용한다. */
        h1 ~ h2 { background-color: orange; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
    <h2>Header - 2</h2>
</body>
</html>


결과

1.6.4 반응 선택자
: 반응 선택자는 사용자의 반응으로 생성되는 특정한 상태를 선택하는 선택자이다.
사용자가 마우스를 특정한 태그 위에 올리면 hover 상태가 적용되고 클릭하면 active 상태가 적용된다.

선택자 형태 

설명 

:active 

사용자가 마우스로 클릭한 태그를 선택한다. 

:hover 

사용자가 마우스를 올린 태그를 선택한다. 

사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* h1 태그에 마우스를 올릴 경우에
           color 속성에 red 키워드를 적용한다. */
        h1:hover { color: red; }
        /* h1 태그를 마우스로 클릭할 때
           color 속성에 blue 키워드를 적용한다. */
        h1:active { color: blue; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1>User Action Selector</h1>
</body>
</html>


- 코드를 실행하고 마우스를 올리고 클릭하면 다음과 같이 색상이 변경된다.

1.6.5 상태 선택자
: 상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자이다.

선택자 형태 

설명 

:checked 

체크 상태의 input 태그를 선택한다. 

:focus 

초점이 맞추어진 input 태그를 선택한다.

:enabled 

사용 가능한 input 태그를 선택한다. 

:disabled 

사용 불가능한 input 태그를 선택한다. 

- 다음과 같은 상태를 check 상태라고 한다.

- 다음과 같은 상태를 focus 상태라고 한다.

사용법

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
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* input 태그가 사용 가능한 경우에
           background-color 속성에 white 키워드를 적용한다. */
        input:enabled { background-color: white; }
        /* input 태그가 사용 가능한 경우에
           background-color 속성에 gray 키워드를 적용한다. */
        input:disabled { background-color: gray; }
        /* input 태그가 사용 가능한 경우에
        background-color 속성에 orange 키워드를 적용한다. */
        input:focus { background-color: orange; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h2>Enabled</h2>
    <input />
    <h2>Disabled</h2>
    <input disabled="disabled" />
</body>
</html>


결과
- 기본

-Enabled 창을 클릭했을 때

1.6.6 구조 선택자
: 구조 선택자는 CSS3부터 지원하는 선택자이다.
일반적으로 자손 선택자와 병행해서 많이 사용한다.

1.6.7 일반 구조 선택자
: 일반 구조 선택자는 특정한 위치에 있는 태그를 선택하는 선택자이다.

선택자 형태 

설명 

:first-child 

첫 번째에 위치하는 자손을 선택한다. 

:last-child 

마지막에 위치하는 자손을 선택한다. 

:nth-child(수열) 

앞에서 수열 번째에 있는 자손을 선택한다. 

:nth-last-child(수열) 

뒤에서 수열 번째에 있는 자손을 선택한다. 

- fist-child 선택자는 CSS2.1부터 지원하고 있다.
사용법

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
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        ul { overflow: hidden; }
        li {
            list-style: none;
            float:left; padding: 15px;
        }
        li:first-child { border-radius: 10px 0 0 10px; }
        li:last-child { border-radius: 0 10px 10px 0;}
        li:nth-child(2n) { background-color: #FF0003; }
        li:nth-child(2n+1) { background-color: #800000; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
        <li>Sixth</li>
        <li>Seventh</li>
    </ul>
</body>
</html>


결과

1.6.8 형태 구조 선택자
: 형태 구조 선택자는 일반 구조 선택자와 비슷하지만 태그 형태를 구분한다.

선택자 형태 

설명 

:first-of-type 

자손 중에서 첫 번째로 등장하는 특정 태그를 선택한다. 

:last-of-type

자손 중에서 마지막으로 등장하는 특정 태그를 선택한다. 

:nth-of-type(수열) 

자손 중에서 앞에서 수열 번째로 등장하는 특정 태그를 선택한다. 

:nth-last-of-type(수열) 

자손 중에서 뒤에서 서열 번째로 등장하는 특정 태그를 선택한다. 

사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        h1:first-of-type { color: red; }
        h2:first-of-type { color: red; }
        h3:first-of-type { color: red; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1>Header - 1</h1>
    <h2>Header - 2</h2>
    <h3>Header - 3</h3>
    <h3>Header - 3</h3>
    <h2>Header - 2</h2>
    <h1>Header - 1</h1>
</body>
</html>


결과

1.6.9 문자 선택자
: 문자 선택자는 태그 내부의 특정한 조건의 문자를 선택하는 선택자이다.

1.6.10 시작 문자 선택자
: 시작 문자 선택자는 태그 내부의 첫 번째 글자나 첫 번째 줄을 선택할 때 사용하는 선택자이다.

선택자 형태 

설명 

:first-letter 

첫 번째 글자를 선택한다. 

:first-line 

첫 번째 줄을 선택한다. 

사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p::first-letter { font-size: 3em; }
        p::first-line { color: red; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <p>Aenead ac arat et massa vehicula laoreet consequat et sem</p>
</body>
</html>


결과

1.6.11 반응 문자 선택자
: 반응 문자 선택자는 사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자이다.

선택자 형태 

설명 

::selection 

사용자가 드래그한 글자를 선택한다. 

사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        p::selection { background: black; color: red; }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <p>Aenead ac arat et massa vehicula laoreet consequat et sem</p>
</body>
</html>


결과

1.6.12 링크 선택자
: 링크 선택자는 href 속성을 가지고 있는 a 태그와 한 번 이상 다녀온 링크를 선택할 수 있는 선택자이다.

선택자 형태 

설명 

:link 

href 속성을 가지고 있는 a 태그를 선택한다. 

:visited 

방문했던 링크를 가지고 있는 a 태그를 선택한다. 

사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        a { text-decoration: none; }
        a:visited { color: red; }
        /* href 속성을 가지고 있는 a 태그 뒤의 공간에
           "- (href 속성)"을 추가한다. */
        a:link::after { content: ' - ' attr(href); }
    </style>
<meta charset="utf-8">
</head>
<body>
    <h1><a>Nothing</a></h1>
    <h1><a href="http://hanb.co.kr">Hanbit Media</a></h1>
    <h1><a href="http://www.w3.org/">W3C</a></h1>
    <h1><a href="http://github.com">Github</a></h1>
</body>
</html>


결과

1.6.13 부정 선택자
: 부정 선택자는 지금까지 배운 선택자를 모두 반대로 적용할 수 있게 만드는 선택자이다.

선택자 형태 

설명 

:not(선택자) 

선택자를 반대로 적용한다. 

사용법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Selector Basic Page</title>
    <style>
        /* input 태그 중에서 type 속성이 password가 아닌 태그의
           background 속성에 red 키워드를 적용한다. */
        input:not([type=password]) {
            background: red;
        }
    </style>
<meta charset="utf-8">
</head>
<body>
    <input type="password" />
    <input type="text" />
    <input type="password" />
    <input type="text" />
</body>
</html>


결과


'기초튼튼 > CSS' 카테고리의 다른 글

레이아웃(flex, media query, float, 다단(multicolumn), masonry layout)  (0) 2019.03.11
레이아웃(인라인 vs 블럭레벨, 박스모델, 마진겹침현상, 포지션)  (0) 2019.03.06
CSS3 스타일 속성 기본  (0) 2019.02.22
'기초튼튼/CSS' Related Articles more