[CSS] CSS 선택자 : 선택자, 의사 클래스, 의사 요소, 속성 선택자

728x90

선택자

: CSS에서 스타일을 적용할 대상을 선택할 때 사용한다

1. 전체 선택자

HTML 문서 내부의 모든 요소 선택

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

2. HTML 요소 선택자

3. 아이디(id) 선택자

특정 아이디 이름을 가지는 요소만을 선택

※ 여러 요소에 중복된 아이디를 사용하면 HTML, CSS에는 문제가 없지만, 자바스크립트 작업에서 오류가 발생한다

→ 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스 사용

<style>
    #heading { color: sandybrown; text-decoration: line-through; }
</style>
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

4. 클래스(class) 선택자

특정 집단의 여러 요소를 한 번에 선택할 때 사용

<style>
    .headings { color: deepskyblue; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

5. 그룹선택자

여러 선택자를 같이 사용하고자 할 때 사용

<style>
    h2 { color: navy; }
    h2, h3 { text-align: center; }
    h2, h3, p { background-color: lightgray; }
</style>

결합 선택자

: 하나 이상의 선택자가 포함되었을 때, 연관된 선택자들 간의 관계 설정

> 자손 선택자 (descendant selector)

해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택

(예) 모든 <div> 태그의 하위 요소 중에서 <p> 태그를 모두 선택하는 예제

div p {스타일;}

> 자식 선택자 (child selector)

해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택

(예) 모든 <div> 태그의 바로 밑에 존재하는 하위 요소 중 <p> 태그를 모두 선택하는 예제

div > p {스타일;}

동위 선택자

동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택

동위 관계란 같은 부모를 가진 요소들, 즉 형제 요소들을 말한다

일반 동위 선택자 (general sibling seletor)

(예) 모든 <div> 태그와 동위 관계에 있는 요소들 중 <div> 보다 뒤에 존재하는 <p> 태그를 모두 선택

div ~ p {스타일;}

인접 동위 선택자 (adjacent sibling selector)

(예) 모든 <div> 태그와 동위 관계에 있는 요소들 중 <div> 태그 바로 뒤에 존재하는 <p> 태그를 모두 선택

div + p {스타일;}

의사 클래스 (pseudo-class)

: CSS에서 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다

> 의사 클래스의 문법

선택자:의사클래스이름 {속성: 속성값;} 

선택자.클래스이름:의사클래스이름 {속성: 속성값;} 

선택자#아이디이름:의사클래스이름 {속성: 속성값;}

대표적인 CSS 의사 클래스

> 동적 의사 클래스 (dynamic pseudo-classes)

:link

:visitied

:hover

:active

:focus

> 상태 의사 클래스 (UI element states pseudo-classes)

:checked

:enabled

:disabled

> 구조 의사 클래스 (structural pseudo-classes)

:first-child

:nth-child

:first-of-type

:nth-of-type

:only-child

:empty

:root

> 기타 의사 클래스

:not : 모든 선택자와 함께 사용할 수 있고, 해당 선택자를 반대로 적용하여 선택한다

:lang : 특정 HTML 요소를 사용자 컴퓨터 언어 설정에 따라 다르게 표현할 때 사용

<style>
    :lang(en) { quotes: '"' '"'  "'"  "'"; }
    :lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>

의사 요소 (pseudo-element)

: 해당 HTML 요소의 특정 부분만을 선택할 때 사용

> 의사 요소 문법

선택자::의사요소이름 {속성: 속성값;}

> 대표적인 CSS 의사 요소

::first-letter

::first-line

::before : 특정 요소의 content 부분 바로 앞에 다른 요소를 삽입할 때 사용

<style>
    p::before { content: url("/examples/images/img_penguin.png"); }
</style>

::after

::selection

: 해당 요소에서 사용자가 선택한 부분(드래그 등)만을 선택할 때 사용

> 하나의 HTML 요소에 여러 개의 의사 요소를 동시에 적용할 수 있다.

속성 선택자 (attribute selectors)

: 특정 속성이나 속성값을 가지고 있는 HTML 요소를 선택할 때 사용

> 기본 속성 선택자

1. [속성이름] 선택자

<style>
    [title] { background: black; color: yellow; }
</style>

2. [속성이름="속성값"] 선택자

<style>
    [title="first h2"] { background: black; color: yellow; }
</style>

> 문자열 속성 선택자

1. [속성이름~="속성값"]

- 특정 속성의 속성값에 특정 단어를 포함하는 요소를 모두 선택, 속성값과 단어가 정확히 일치하거나 띄어쓰기를 기준으로 인식될 때 포함되는 요소만을 선택

- 다음 예에서 속성값이 "first", "first h2"인 요소는 선택되지만, "first-p"인 요소는 선택되지 않는다

<style>
    [title~="first"] { background: black; color: yellow; }
</style>

2. [속성이름|="속성값"]

- 특정 속성의 속성값에 특정 단어로 시작하는 요소를 모두 선택

- 다음 예에서 속성값이 "first-p"인 요소는 선택되지만, "first h2", "first p"인 요소는 선택되지 않는다

<style>
    [title|="first"] { background: black; color: yellow; }
</style>

3. [속성이름^="속성값"]

- 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택

- 다음 예에서는 title의 속성값이 "first"로 시작되는 요소 모두가 선택된다

<style>
    [title^="first"] { background: black; color: yellow; }
</style>

4. [속성이름$="속성값"]

- 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택

<style>
    [title$="first"] { background: black; color: yellow; }
</style>

5. [속성이름*="속성값"]

- 특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택

<style>
    [title*="first"] { background: black; color: yellow; }
</style>

[참고] http://tcpschool.com/css/intro