[CSS] 선택자(selector)

 

📌 선택자(Selector)

 

 

* 

: 전체 선택자 (universal selector)

* {
  color: blue;
}

 

태그명 

: 해당 태그들만 선택

• 전체 선택자(*)보다 태그명 선택자가 더 셈
  (중복일 시 태그명 선택자가 실행됨)

p {
  color: blue;
}

 

 

#id명

: 해당 id를 가진 태그 선택

• 중복 불가능 ❌

#num {
  color: blue;
}

 

 

 

.class명

: 해당 class를 가진 태그 선택

• 중복 가능 ⭕
• id선택자보다 class가 더 셈
  (중복일 시 class 선택자가 실행됨)

.num {
  color: blue;
}

 

 

 

🔺 선택자 그룹핑

콤마(,)로 선택자 나열

.header, .visual, .main, .slogan, .footer {
    width: 940px;
    margin: 0 auto;
}

 

 

---

📌 자식 선택자

 

 > 

: 특정 요소의 직접적인 자식 요소(child)를 선택

div > p {
    color: red;
}

 

 

 

" " (공백)

: 특정 요소의 모든 하위 요소(descendant)를 선택

div p {
    color: red;
}

 

 

---

📌 복합 선택자

 

1. 일치 선택자 (조건 선택자)

태그.class

: 해당 클래스를 가진 해당 태그 선택

• 태그 선택자의 우선순위 + 클래스 선택자 우선순위 (우선순위를 놓여서 스타일을 적용하는 방법)

h1.heading {
   ...
}
/* class가 heading인 h1 태그 */

 

 

2. 하위(후손) 선택자

태그 .class

: 해당 태그 내부에 해당 클래스를 가진 요소 선택

• 중첩된 요소도 선택한다.

h1 .heading {
   ...
}
/* h1 태그 안의 class가 heading인 모든 요소 */

 

 

3. 자식 선택자

태그 > .class

: 해당 태그의 직계 자식 요소 중 해당 클래스를 가진 요소 선택

• 중첩된 요소는 선택하지 않는다.

h1 > .heading {
   ...
}
/* h1 태그의 직계 자식 중 heading 클래스를 가진 요소 */

 

 

---

 

📌 속성 선택자

 

태그[속성] 

: 해당 속성이 있는 태그를 선택

a[href] {
  color: orange;
}
/* href 속성을 가진 a 태그 선택 */

 

 

 

태그[속성="value"]

: 속성값이 똑같은 태그를 선택

li[class="a"] {
  background-color: yellow;
}

 

 

 

태그[속성~="value"]

: 속성값이 똑같거나 (공백으로 구분된) 속성값 목록에 value가 있는 태그를 선택

li[class~="a"] {
  color: red;
}

 

 

태그[속성^="value-"]

: 속성값이 value로 시작하는 태그 선택

li[class^="a"] {
  font-size: 200%;
}

 

 

 

태그[속성$="-value"]

: 속성값이 value로 끝나는 태그 선택

li[class$="a"] {
  background-color: yellow;
}

 

 

 

태그[속성*=" value"]

: 속성값에 value가 들어가는 모든 태그 선택

li[class*="a"] {
  color: red;
}

 

 

---

 

📌 구조 선택자

nth:child()

: 형제 요소 사이에서 해당 순서의 요소를 선택하는 선택자

• odd: 홀수(1, 3, 5, ...)인 요소 선택
• even: 짝수(2, 4, 6, ...)인 요소 선택
• 양수: 왼쪽 방향
• 음수: 오른쪽 방향

 

 

nth-of-type()

: 해당 태그의 자식 요소들 중에서 n번 째에 위치하는 요소

• odd: 홀수(1, 3, 5, ...)인 요소 선택
• even: 짝수(2, 4, 6, ...)인 요소 선택

 

 

* nth-child, nth-of-type 확인하는 사이트

Mastering the :nth-child | CSS3 pseudo classes and :nth-child ranges

 

---

 

📌 가상 선택자

• 자바스크립트로 선택이 불가능(DOM 조작 불가능) => 가상 요소이기 때문
  가상 요소는 블럭이 잡히지 않음 (마크업에 존재 X, 눈에만 보임)
• inline 속성

 

 

::before

: 요소의 처음에 추가

::after

: 요소의 마지막에 추가

 

See the Pen selector by nadia kwon (@nadia-kwon) on CodePen.

 

 

 

 

---

 

출처

 

:nth-child - CSS: Cascading Style Sheets | MDN

 

CSS :nth-of-type() 가상 클래스 사용 방법 - 코딩에브리바디

 

속성 선택자 - Web 개발 학습하기 | MDN

 

[CSS] 하위 요소 선택하기