Selectors

선택자(Selector)는 꾸밀 태그들을 골라주는 역할을 한다.

Universal Selector

*, 모든 태그를 선택함

* {
  color: black;
}

Type Selector / Element Selector

태그명, 특정 태그를 선택함

li {
  color: blue;
}

ID Selector

#id

#special {
  color: pink;
}

Class Selector

.class

.complete {
  color: green;
}

Group Selector

콤마(,), h1와 h2 모두
.class

h1, h2 {
  color: orange;
}

Descentant Selector

공백, li 안의 a

li a {
  color: teal;
}

Adjacent Selector

+, h1 바로 뒤에 오는 p

h1 + p {
  color: red;
}

~, h1 뒤에 오는 모든 p

h1 ~ p {
  color: purple;
}

Direct Child

>, div 바로 아래의 모든 li

div > li {
  color: white;
}

Attribute Selector

[], 지정된 속성을 갖는 요소를 선택

a[href]
a[href^="naver"] /*naver로 시작하는 속성 값*/
a[href$=".com"] /*.com으로 끝나는 속성 값*/
a[href*="tp"] /*tp를 포함하는 속성 값*/

Pseudo Classes & Pseudo Elements

Pseudo Classes

일반적인 선택자가 태그, ID, Class 등 HTML 문서에 존재하는 것을 선택하는 것이라면, 가상 클래스 선택자는 어떠한 상태를 선택하는 것이다.

:active
:checked
:first
:first-child
:hover
:not()
:nth-child()
:nth-of-type()

button:hover {
  color: red;
  background: beige;
}

Pseudo elements

가상 요소는 실제로 문서 상에 존재하지 않는 요소를 만든다.

::after
::before
::first-letter
::first-line
::selection