본문 바로가기
Study/HTML & CSS

[CSS] 선택자 (Selector)

tonyprojectroom 2022. 10. 24. 23:09

1. CSS 선택자

CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능입니다.

선택자를 사용해 특정한 HTML 태그를 선택하면 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있습니다. [1] (103)

 

 

2. 전체 선택자

HTML 문서 안에 있는 모든 태그를 선택할 때는 전체 선택자를 사용합니다. [1] (107)

<style>
    * { color: red; }
</style>

- 모든 글자의 색상이 빨간색으로 변경

 

 

3. 태그 선택자

<style>
    a { color: black;  }
    h1, h2 { color: blue; }
</style>

- 모든 a 태그의 색상이 검은색으로 변경

- 모든 h1, h2 태그의 색상이 파란색으로 변경

 

 

4. 아이디 선택자

1) 앞에 #을 붙이면 아이디 선택자

2) 아이디는 클래스와 달리 화면에 단 한 개만 존재하는, 유일한 대상을 지칭할 때 활용

<head>
    <style>   
        #area1 {
            background: red;
        }
        
        #area2 {
            background: blue;
        }
    </style>
</head>
</style>
<body>
    <div id="area1">
        <h1>Area 1</h1>
    </div>
    <div id="area2">
        <h1>Area 2</h1>
    </div>
</body>

 

 

5. 클래스 선택자

1) class1 앞에 . 을 붙이면 이 선택자는 웹 페이지에서 class가 "class1" 인 모든 태그를 가리키는 선택자가 됨 

<style>
    .class1 {
        color: gray;   
    }
</style>


<a href="1.html" class="class1">HTML</a>

 

Ex) 현재 머물고 있는 페이지의 링크를 빨간색으로 변경

<style>
    .active {
        color: red;
    }
</style>

 

2) class라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분

<style>
    .class1 { color: read; }
    .class2 { background-color: blue: }    
</style>

<a href="1.html" class="class1 class2">HTML</a>

 

 

6. 속성 선택자

속성 선택자를 사용하면 특정 속성을 가진 HTML 태그를 선택할 수 있습니다. 속성 선택자는 다른 선택자와 함께 사용하는 선택자입니다. [1] (118)

 

<style>
    input[type=text] { background: red; }
    input[type=password] { background: blue; }    
</style>

<form>
    <input type="text" />
    <input type="password" />
</form>

 

 

7. 후손 선택자와 자손 선택자

1) 후손 / 자손

<div>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>

div 태그를 기준으로 바로 한 단계 아래에 위치한 태그 (h1, h2, ul) 를 자손이라고 부르고 div 태그 아래에 위치한 모든 태그를 후손이라고 부릅니다. 

 

2) 후손 선택자

<head>
    <style>
        #div1 h1 { color: red; }
        #div2 h1 { color: blue; }
    </style>
</head>
<body>
    <div id="div1">
        <h1>Division 1</h1>
        <div id="div1a">
            <h1>Division 1a</h1>
        </div>
    </div>
    <div id="div2">
        <h1>Division 2</h1>
    </div>
</body>

- 아이디가 div1 인 태그의 모든 후손 중 h1 태그를 선택

- 아이디가 div2 인 태그의 모든 후손 중 h1 태그를 선택

 

2) 자손 선택자

<head>
    <style>
        #div1 > h1 { color: red; }
        #div2 > h1 { color: blue; }
    </style>
</head>
<body>
    <div id="div1">
        <h1>Division 1</h1>
        <div id="div1a">
            <h1>Division 1a</h1>
        </div>
    </div>
    <div id="div2">
        <h1>Division 2</h1>
    </div>
</body>

- 아이디가 div1 인 태그의 자손 중 h1 태그를 선택

- 아이디가 div2 인 태그의 자손 중 h1 태그를 선택

 

 

8. 동위 선택자

선택자 형태 설명
선택자A + 선택자B 선택자A 바로 뒤에 위치하는 선택자B를 선택
선택자A ~ 선택자B 선택자A 뒤에 위치하는 모든 선택자B를 선택

 

<head>
    <style>
        h1 + h2 { color: red; }        
    </style>
</head>
<body>
    <h1>Header 1</h1>
    <h2>Header 2-1</h2>
    <h2>Header 2-2</h2>
    <h2>Header 2-3</h2>
    <h2>Header 2-4</h2>
</body>

 

<head>
    <style>
        h1 ~ h2 { color: red; }        
    </style>
</head>
<body>
    <h1>Header 1</h1>
    <h2>Header 2-1</h2>
    <h2>Header 2-2</h2>
    <h2>Header 2-3</h2>
    <h2>Header 2-4</h2>
</body>

 

 

9. 반응 선택자

선택자 형태 설명
:active 사용자가 마우스로 클릭한 태그를 선택
:hover 사용자가 마우스를 올린 태그를 선택

 

<head>
    <style>
        h1:active { color: red; }
        h1:hover { color: blue; }       
    </style>
</head>
<body>
    <h1>Header 1</h1>
</body>

 

1) 마우스를 글자위로 올렸을 때

 

2) 마우스를 클릭하고 있을 때

 

 

10. 상태 선택자

선택자 형태 설명
:checked 체크 상태의 input 태그를 선택
:focus 초점이 맞추어진 input 태그를 선택
:enabled 사용 가능한 input 태그를 선택
:disabled 사용 불가능한 input 태그를 선택

 

<head>
    <style>
        input:enabled { background-color: red; }
        input:disabled { background-color: blue; }
        input:focus { background-color: green; }
    </style>
</head>
<body>
    <input type="text" />
    <input type="text" disabled="disabled" />
</body>

 

1) 실행 후 

 

2) Focus 를 준 경우 

 

 

11. 일반 구조 선택자

선택자 형태 설명
:first-child 형제 관계 중에서 첫 번째에 위치하는 태그를 선택
:last-child 형제 관계 중에서 마지막에 위치하는 태그를 선택
:nth-child(수열) 형제 관계 중에서 앞에서 수열 번째에 위치하는 태그를 선택
:nth-last-child(수열) 형제 관계 중에서 뒤에서 수열 번째에 위치하는 태그를 선택

 

<head>
    <style>
        li:first-child { color: red; }
        li:last-child { color: blue; }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>

 

<head>
    <style>
        li:nth-child(2n) { color: red; }
        li:nth-child(2n+1) { color: blue; }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</body>

nth-child(2n) : 2, 4 번째 선택

nth-child(2n+1) : 1, 2, 5 번째 선택

 

 

12. 형태 구조 선택자

선택자 형태 설명
:first-of-type 형제 관계 중에서 첫 번째에 등장하는 특정 태그를 선택
:last-of-type 형제 관계 중에서 마지막에 등장하는 특정 태그를 선택
:nth-of-type(수열) 형제 관계 중에서 앞에서 수열 번째에 등장하는 특정 태그를 선택
:nth-last-of-type(수열) 형제 관계 중에서 뒤에서 수열 번째에 등장하는 특정 태그를 선택

 

<head>
    <style>
        h1:first-of-type { color: red; }
        h2:first-of-type { color: blue; }
    </style>
</head>
<body>
    <ul>
        <h1>Item 1</h1>
        <h2>Item 2</h2>
        <h3>Item 3</h3>
        <h1>Item 4</h1>
        <h2>Item 5</h2>
        <h3>Item 6</h3>
    </ul>
</body>

 

<head>
    <style>
        h1:nth-of-type(2n) { color: red; }
        h2:nth-of-type(2n+1) { color: blue; }
    </style>
</head>
<body>
    <ul>
        <h1>Item 1</h1>
        <h2>Item 2</h2>
        <h3>Item 3</h3>
        <h1>Item 4</h1>
        <h2>Item 5</h2>
        <h3>Item 6</h3>
    </ul>
</body>

 

 

13. 시작 문자 선택자

선택자 형태 설명
::first-letter 첫 번째 글자를 선택
::first-line 첫 번째 줄을 선택

(:: 기호를 사용하는 것이 표준이지만 : 기호를 사용해도 정상 작동함)

 

<head>
    <style>
        p:first-letter { font-size: 3em; }
        p:first-line { color: red; }
    </style>
</head>
<body>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>

 

 

14. 부정 선택자

<head>
    <style>
        input:not([type=password]) {
            background: red;
        }
    </style>
</head>
<body>
    <input type="password" />
    <input type="text" />
    <input type="password" />
    <input type="text" />    
</body>

 

 

 

 

 

Reference

 

[1] 모던 웹을 위한 HTML5+CSS3 바이블, 윤인성 (2019), 한빛미디어

'Study > HTML & CSS' 카테고리의 다른 글

[CSS] 스타일 속성 - 가시 속성  (0) 2022.10.31
[CSS] 스타일 속성 - 단위  (0) 2022.10.26
[HTML] 입력 양식 태그  (0) 2022.10.19
[HTML] CodePen  (0) 2022.10.06
[CSS] 복합 선택자  (0) 2022.10.03

'Study/HTML & CSS' Related Articles

티스토리툴바