[Css] 선택자 - 태그, 아이디, 속성, 동위, 의사 요소 클래스

CSS 선택자(selector)란?

• CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자를 사용하며, 복수개의 셀렉터를 연속하여 지정할 때는 쉼표 , 로 구분한다.

h1, p { color: red; }

전체 선택자

• CSS를 적용할 대상으로 head 요소를 포함한 HTML 문서 내부의 모든 요소를 선택하며, * 기호를 사용한다.

* { color: red; }

HTML 태그 요소 선택자

• CSS를 적용할 대상으로 HTML 요소 이름을 직접 사용하여 선택할 수 있다.

h2 { color: teal; text-decoration: underline; }

<h2>이 부분에 스타일을 적용합니다.</h2>

아이디(id) 선택자

• 아이디 선택자는 특정 아이디 이름을 가지는 요소만을 선택해주며, 앞에 샵 기호 # 를 붙인다.
• HTML과 CSS에서는 하나의 웹 페이지에 같은 아이디를 가진 여러 요소들을 사용해도 문제가 없지만 Javascript에서는 오류가 발생하므로 되도록이면 하나의 웹 페이지의 요소에는 클래스나 다른 아이디 이름을 사용하는 것이 좋다.

#heading { color: teal; text-decoration: line-through; }

<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

클래스(class) 선택자

• 클래스 선택자는 같은 클래스 이름을 가지는 요소들을 한번에 선택해주며, 앞에 마침표 . 를 붙여준다.
• id의 속성값은 중복될 수 없는 유일한 값이나 class의 속성값은 중복될 수 있다.
• HTML 요소에 class 속성 값은 공백으로 구분하여 여러 개 지정할 수 있으므로, 미리 스타일을 정의하고 HTML 요소에 필요한 스타일을 지정하는 것이 유용하다.

.text-center { text-align: center; }
.text-large  { font-size: 200%; }
.text-red    { color: red; }
.text-blue   { color: blue; }

<p class="text-center">Center</p>
<p class="text-large text-red">Large Red</p>
<p class="text-center text-large text-blue">Center Large Blue</p>

 

속성 선택자(attribute selectors)란?

• 속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있다.

기본 속성 선택자

• 선택자[속성이름] 는 특정 속성을 가지고 있는 요소를 모두 선택한다.
• 선택자[속성이름="속성값"] 는 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다.

/* a 요소 중에 href 어트리뷰트를 갖는 모든 요소 */
a[href] { color: red; }

/* a 요소 중에 target 어트리뷰트의 값이 "_blank"인 모든 요소 */
a[target="_blank"] { color: red; }

문자열 속성 선택자

• 문자열 속성 선택자는 HTML 요소가 가지고 있는 특정 속성의 속성값 내에 특정 문자열을 확인하여 선택해준다.
• 선택자[속성이름~="속성값"] 는 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택하는데, 띄어쓰기 기준으로 단어를 인식하기에 하이픈(-)등으로 연결된 단어들은 전부 하나의 단어로 인식한다.

[title~="first"] { background: black; color: yellow; }

• 선택자[속성이름|="속성값"] 는 속성값이 특정 문자열로 시작하는 요소를 모두 선택하는데, title 속성값이 정확히 "first"인 요소나 "first" 바로 다음에 하이픈(-)으로 시작하는 요소만을 선택한다.

[title|="first"] { background: black; color: yellow; }

• 선택자[속성이름^="속성값"] 는 속성값이 특정 문자열로 시작하는 모든 요소를 선택한다.

[title^="first"] { background: black; color: yellow; }

• 선택자[속성이름$="속성값"] 는 속성값이 특정 문자열로 끝나는 모든 요소를 선택한다.

[title$="first"] { background: black; color: yellow; }

• 선택자[속성이름*="속성값"] 는 속성값에 특정 문자열를 포함하는 요소를 모두 선택한다.

[title*="first"] { background: black; color: yellow; }

 

복합 선택자(Combinator)란?

• 자신보다 1단계 위에 속하면 부모 요소라하고, 1단계 아래에 속하면 자식 요소라하며, 자신보다 몇 단계 아래에 속하면 자손 요소라 한다.

자식 선택자(child selector)

• 자식 선택자는 셀렉터A의 모든 자식 요소 중에서 셀렉터B와 일치하는 요소를 선택하며, 부모와 자식 선택자 사이에 > 를 명시해야 한다.

/* 셀렉터A > 셀렉터B */
div > p { background-color: #FFEFD5; }

자손 선택자(descendant selector)

• 자손 선택자는 셀렉터A의 모든 하위 요소 중 셀렉터B와 일치하는 요소를 선택하며, 부모와 자손 선택자 사이에 한 칸의 띄어쓰기를 반드시 명시한다.

/* 셀렉터A 셀렉터B : div의 하위요소 p 선택 */
div p { background-color: #FFEFD5; }

 

동위 선택자(sibling selector)란?

• 동위 관계란 계층 구조에서 같은 부모 요소를 가지고 있는 요소들로 형제 요소라고 한다.
• 동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

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

• 셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.

/* 셀렉터A ~ 셀렉터B */
div ~ p { background-color: #FFE4E1; }

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

• 인접 동위 선택자는 셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택하며, A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.

/* 셀렉터A + 셀렉터B */
div + p { background-color: #FFE4E1; }

 

의사 요소(pseudo-element)

• 의사 요소는 요소 컨텐츠의 첫글자, 첫 줄, 앞 또는 뒤와 같은 특정 부분에 스타일을 적용하기 위하여 사용된다.
• CSS1과 CSS2에서는 의사 클래스와 의사 요소를 하나의 콜론 :으로 표기하지만, CSS3에서는 의사 클래스는 하나의 콜론 : 으로 의사 요소에는 두 개의 콜론 ::을 사용한다.

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

/* 이 의사 요소는 블록 타입의 요소에만 텍스트의 첫 글자만을 선택한다 */
p::first-letter { color: #FF4500; font-size: 2em; }

/* 이 의사 요소는 블록 타입의 요소에만 텍스트의 첫 라인만을 선택한다 */
p::first-line { color: #FF4500; font-size: 2em; }

/* 이 의사 요소는 특정 요소의 내용 부분 바로 앞에 다른 요소를 삽입할 때 사용한다 */
p::before { content: url("/examples/images/img_penguin.png"); }

/* 이 의사 요소는 특정 요소의 내용 부분 바로 뒤에 다른 요소를 삽입할 때 사용한다 */
p::after { content: url("/examples/images/img_penguin.png"); }

/* 이 의사 요소는 해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용한다 */
p::selection { color: #FF4500; }

 

의사 클래스(pseudo-class)란?

• 의사 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용되며, 이름은 대소문자를 구분하지 않는다.
• 마우스가 올라와 있거나, 링크 방문 여부, 포커스 등의 특정 상태에는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다.

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

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

a:link {color: orange;}        /* 한번도 방문하지 않은 상태 (기본) */
a:visited {color: gray;}       /* 한번이라도 방문한 상태 */
a:hover {color: blue;}         /* 마우스 커서가 올라가 있는 상태 */
a:active {color: red;}         /* 링크를 클릭하고 있는 상태 */
input:focus {color: white;}    /* 포커스를 가지고 있는 input 요소를 모두 선택 */

UI 요소 상태 의사 클래스(UI element states pseudo-class)

• 상태 의사 클래스를 사용하면 입력 양식의 상태에 따라 각각의 스타일을 별도로 설정할 수 있다.

input {color: #FFEFD5;}
input:checked + span {color: red;}    /* 체크된 상태의 input 요소 선택 */
input:enabled + span {color: blue;}   /* 사용할 수 있는 input 요소 선택 */
input:disabled + span {color: gray;}  /* 사용할 수 없는 input 요소 선택 */

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

• 구조 의사 클래스를 사용하면 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있다.

/* 모든 자식 요소 중에서 맨 앞에 위치하는 자식 요소를 모두 선택 */
p:first-child {color: red;}

/* 모든 자식 요소 중에서 맨 마지막에 위치하는 자식 요소를 모두 선택 */
p:last-child {color: red;}

/* 모든 자식 요소 중에서 앞에서부터 n번째에 위치하는 자식 요소를 모두 선택 */
p:nth-child(2n) {color: red;}

/* 모든 자식 요소 중에서 뒤에서부터 n번째에 위치하는 자식 요소를 모두 선택 */
p:nth-last-child(3n) {color: red;}

/* 모든 자식 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택 */
p:first-of-type {color: red;}

/* 모든 자식 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택 */
p:last-of-type {color: red;}

/* 모든 자식 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택 */
p:nth-of-type(2n) {color: red;}

/* 모든 자식 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택 */
p:nth-last-of-type(2n+1) {color: red;}

/* 자식 요소를 단 하나만 가지는 요소의 자식 요소를 모두 선택 */
p:only-child {color: red;}

/* 자식 요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식 요소를 모두 선택 */
p:only-of-type {color: red;}

/* 자식 요소를 전혀 가지고 있지 않은 요소를 모두 선택 */
p:empty {width: 300px; height: 20px; background: red;}

/* 해당 문서의 root 요소를 선택, HTML 문서에서 root는 언제나 html 요소다 */
:root {background: red;}

기타 의사 클래스

/* not 선택자는 셀렉터에 해당하지 않는 모든 요소를 선택 */
input { color: #FFEFD5; }
input:not([type="password"]) { background-color: #CD853F; }

/* lang 선택자는 특정 요소를 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용 */
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }

/* 정합성 검증이 성공한 input 요소 또는 form 요소를 선택 */
input[type="text"]:valid { background-color: greenyellow; }
    
/* 정합성 검증이 실패한 input 요소 또는 form 요소를 선택 */
input[type="text"]:invalid { background-color: red; }

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/