[CSS] CSS selector 정리 ✨

참고자료1

CSS 선택자 - CSS: Cascading Style Sheets | MDN

 

✨CSS 선택자

 

📕 기본 선택자

💻 전체 선택자

* {
  color: green;
}

 

 

💻 유형 선택자

💻 클래스 선택자

💻 ID 선택자

 

💻 특성 선택자 ⭐️

- `[attr]` : 이름의 특성을 가진 요소를 선택

- `[attr=value]`: attr이라는 이름의 특성값이 정확히 value인 요소를 선택함

- `[attr~=value]` : 이름의 특성값이 정확히 value인 요소를 선택. 공백으로 구분한 여러 개의 값을 가지고 있을 수 있음

- `[attr|=value]` : attr이라는 특성값을 가지고 있으며 정확히 value이거나 value로 시작하면서 곧바로 뒤에 문자가 따라 붙으면 이 요소를 선택함.

- `[attr $= value]` : attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택함

- `[attr *= value]` : attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 선택

- `[attr operator value i]` : 괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않음

- `[attr operator value s] : 괄호를 닫기 전에 s 혹은 S를 붙여주면 대소문자 구분함.

#접두사로 #이 있으면, 이 요소를 선택
a[href^="#"] {
  backgound-color: gold;
}

#example이 하나라도 있으면 이 요소 선택
a[href*="example"] {
  background-color: dilver;
}

#대소문자 구분 안함, insensitive가 하나라도 있으면
a[hre *= "insensitive" i] {
  color: gray;
}

#대소문자 구분함, 
a[href*="cAsE" s] {
  color: pink;
}

#접미사로 .org 있으면
a[href$=".org"] {
  color: red;
}

 

 

 

---

 

📕 결합자

 

💻 자손 결합자 ("`공백`")

- 한 칸의 공백 문자로 표현하는 자손 결합자는 뒤쪽 선택자 요소의 조상에 앞쪽 선택자 요소가 존재할 경우 선택

- 자손 결합자를 활용하는 선택자를 자손선택자라고 함

ul.my-things li {
  margin: 2em;
}

 

💻 자식 결합자(>)

- 자식결합자(>)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에 선택

ul.my-thing > li {
 margin: 2em;
}

div > span {
  background-color: DodgerBlue;
}

 

 

💻 일반 형제 결합자(~)

- 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤 쪽 선택자의 요소가 뒤에 위치할 때 선택함.

- 부모 자식 관계 아님.

- 두 요소가 서로 붙어있음 필요는 없음

p ~ span {
  color: red;
}

//html
<span>이건 빨강이 아닙니다.</span>
<p>여기 문단이 있습니다.</p>
<code>그리고 코드도 있습니다.</code>
<span>이제 빨강입니다!</span>
<code>더 많은 코드가 있습니다.</code>
<span>이것도 빨강입니다!</span>

 

 

💻 인접 형제 결합자(+)

- 지정 요소의 바로 다음에 위치하는 형제 요소만 적용

img + p {
  font-weight: bold;
}

 

li:first-of-type + li {
  color: red;
}

 

 

💻 컬럼 결합자(||)

- 첫번째 선택자에 의해 일치되는 컬럼 요소에 속하는 두번째 선택자와 일치되는 요소들만을 매칭