🌎 Web/CSS

[CSS] CSS의 다양한 선택자(selector)

오늘 ONEUL 2022. 3. 20. 23:52

1. 단일 선택자(simple selector)

선택자(selector)가 지정하는 요소(element) 혹은 개체(node)가 단일임을 지칭한다. 단일 선택자라 할지라도 적용 받는 태그의 수는 여러개일 수 있다.

 

 

태그 선택자(element selector)

HTML 요소의 이름을 직접 사용하여 선택한다.

p {
  color: red;
  text-align: center;
}

/* 페이지의 모든 <p> 요소는 빨간색 텍스트 색상으로 가운데 정렬된다. */

 

id 선택자(id selector)

특정 id 속성을 가진 HTML요소를 선택한다. (중복된 id 속성은 선택자 사용에 혼란을 줄 수 있으므로 지양한다.)

#para1 {
  text-align: center;
  color: red;
}

/* id="para1"인 모든 HTML 요소는 가운데 정렬로 텍스트 색상은 빨간색이다. */

 

class 선택자(class selector)

특정 class 속성을 가진 HTML요소를 선택한다.

.center {
  text-align: center;
  color: red;
}

/* class="center"인 모든 HTML 요소는 가운데 정렬로 텍스트 색상은 빨간색이다. */

 

 

 

 

2. 결합, 조합 선택자(combinator selector)

CSS 선택자는 둘 이상의 선택자를 포함할 수 있다. 결합 선택자는 연관된 선택자들 간의 관계를 설정해준다.

 

 

그룹 선택자(grouping selector)

여러 선택자를 같이 사용하고자 할 때 사용한다. 선택자는 쉼표(,)로 구분하여 연결한다.

h1, h2, p {
  text-align: center;
  color: red;
}

/* 페이지 내의 모든 <h1>, <h2>, <p> 요소는 가운데 정렬로 텍스트 색상은 빨간색이다. */

 

자손 선택자(descendant selector)

해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택한다. 선택자는 공백( )으로 구분한다.

div p {
  background-color: yellow;
}

/* <div> 요소 내의 모든 <p> 요소를 선택한다. */

 

자식 선택자(child selector)

해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택한다. 선택자는 부등호(>)로 구분한다.

div > p {
  background-color: yellow;
}

/* <div> 요소의 자식인 모든 <p> 요소를 선택한다. */

 

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

해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택한다. 선택자는 플러스(+)로 구분한다.

div + p {
  background-color: yellow;
}

/* 모든 <div> 요소와 동위 관계에 있는 요소 중 바로 뒤에 존재하는 <p> 요소를 선택한다. */

 

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

해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 모든 특정 타입의 요소를 모두 선택한다. 선택자는 물결(~)로 구분한다.

div ~ p {
  background-color: yellow;
}

/* 모든 <div> 요소와 동위 관계에 있는 요소 중 <div> 요소보다 뒤에 존재하는 모든 <p> 요소를 선택한다. */

 

 

 

 

3. 의사 선택자(pseudo-class selector)

선택하고자 하는 HTML 요소의 특수한 '상태(state)'를 명시할 때 사용한다.

 

 

<a> 태그의 의사 클래스(anchor pseudo-classes)

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}
※ :hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작한다.
※ :active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작한다.

 

그 외 다양한 의사 클래스(CSS pseudo classes)

의사 클래스 설명
:link 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태)
:visited 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.
:hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
:active 사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
:focus 초점이 맞춰진 input 요소를 모두 선택함.
:checked 체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled 사용할 수 있는 input 요소를 모두 선택함.
:disabled 사용할 수 없는 input 요소를 모두 선택함.
:target 현재 활성화된 target 요소를 모두 선택함.
:in-range 특정 범위 내의 값을 가지는 input 요소를 모두 선택함.
:out-of-range 특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함.
:read-only readonly 속성을 가지는 input 요소를 모두 선택함.
:read-write readonly 속성을 가지지 않는 input 요소를 모두 선택함.
:required required 속성을 가지는 input 요소를 모두 선택함.
:optional required 속성을 가지지 않는 input 요소를 모두 선택함.
:valid 유효한 값을 가지는 input 요소를 모두 선택함.
:invalid 유효하지 않은 값을 가지는 input 요소를 모두 선택함.
:first-child 모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함.
:last-child 모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:nth-last-child 모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:first-of-type 모든 자식(child) 요소 중에서 첫 번째로 등장하는 특정 요소를 모두 선택함.
:last-of-type 모든 자식(child) 요소 중에서 마지막으로 등장하는 특정 요소를 모두 선택함.
:nth-of-type 모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.
:nth-last-of-type 모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택함.
:only-child 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:only-of-type 자식(child)  요소를 특정 요소 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty 아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.
:root 문서의 root 요소를 선택함.
:not(선택자) 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함.
:lang(언어) 특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.

 

 

 

 

4. 속성 선택자(attribute selector)

특정 속성이나 속성값을 가지고 있는 HTML 요소를 선택한다.

 

 

[속성] 선택자([attribute] selector)

특정 속성을 가지고 있는 요소를 모두 선택한다.

a[target] {
  background-color: yellow;
}

/* targer 속성이 있는 모든 <a> 요소를 선택한다. */

 

[속성="속성값"] 선택자([attribute="value"] selector)

특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다.

a[target="_blank"] {
  background-color: yellow;
}

/* target="_blank" 속성이 있는 모든 <a> 요소를 선택한다. */

 

 

 

 

 

※ 참고자료

http://www.tcpschool.com/css/intro

https://www.w3schools.com/css/default.asp

저작자표시