[CSS] 선택자

앞에서 배운 CSS의 기본 규칙은 아래와 같았다.

선택자 {
    속성: 값
}

여기서 선택자에 주목해보자. 선택자의 위치에 넣을 수 있는 선택자 종류는 다양하다.

선택자의 종류

전체 선택자: *

문서의 모든 요소에 스타일을 적용하고 싶은 경우 사용한다.

• 브라우저의 기본 스타일을 제거하고, 통일된 스타일을 적용할 때 유용하다.
• 하지만 크기가 큰 문서에서는 다소 비효율적 일 수 있다.
  • 모든 요소를 다 선택하기 때문에 문서 크기가 크고 복잡한 경우 CSS 렌더링 성능에 영향을 미칠 수 있다.
• * 선택자는 모든 요소를 포함하기 때문에, 해당 속성을 지원하지 않는 태그에도 스타일이 적용되려고 시도된다.
  • 예: <img> 태그에는 color 속성이 없지만, 전체 선택자를 사용하면 브라우저가 불필요한 계산을 수행한다.

* {
    속성: 값
}

• ex) 모든 글자의 색상을 검은색으로 바꾼다든지, 폰트 크기를 통일하고 싶은 경우 사용할 수 있다.

주의할 점

• 선택자는 CSS로 생성하는 가상 요소(예를 들어 ::before, ::after)는 선택하지 않는다.

특정 유형의 선택자와 함께 사용하기

요소 선택자 뒤에 붙일 수도 있다. 이 경우 해당 요소 선택자의 모든 자손 요소를 선택하여 스타일을 적용하게 된다.

section * { /* section 요소의 모든 자손 요소를 선택 */
    background-color: gold;
}

 

---

요소 선택자: 태그

단일 요소 선택하기

button {
    font-size: 30px
}

리스트로 선택하기

,로 구분하여 여러 요소 선택자를 나열할 수 있다.

아래 코드는 모든 h1 태그와 h2 태그를 선택하여 마젠타 색상을 적용하라는 뜻이다.

h1, h2 {
    color: magenta;
}

 

---

ID 선택자 - id 값으로 요소 선택

# 바로 뒤에 지정할 id 값을 붙이면, 해당 id를 갖는 태그에 스타일을 적용할 수 있다.

#id_value {
    /* ... */
}

• id 속성은 해당 요소의 고유식별자를 지정하는 속성이며, 속성의 값은 문서에서 유일하고 고유해야 한다.

주의할 점

• #id 선택자는 구체성 값이 매우 높기 때문에, 남용하면 다른 선택자들과 충돌할 가능성이 높아진다.
• #id 선택자는 고유한 식별자로 사용되어야 하고, 스타일링이 목적인 경우 클래스 선택자를 사용하는게 좋다.
• 아이디는 최소화하는게 좋다.(한 페이지에 10개 이내로 씀)

---

.class 선택자 - 클래스 이름으로 요소 선택하기

class 속성을 통해 지정된 클래스 이름으로 요소를 선택하려면 CSS에서 . 뒤에 클래스 이름을 붙인다.
.class 선택자는 지정된 클래스 이름(class)을 값으로 갖는 요소를 모두 선택한다.

class 속성이란?

• HTML 태그에 class 속성을 추가하여 요소를 분류하거나 식별할 수 있다.
• class 속성을 통해 요소에 하나 이상의 클래스 이름을 지정할 수 있다.
• 이 클래스 이름은 CSS나 JavaScript에서 요소를 분류/식별/선택하여 스타일링 및 조작하는 데 사용된다.
• 여러 클래스 이름을 지정하려면 띄어쓰기로 구분한다.

.클래스명{
     속성: 값; 
}

 

---

자손 선택자

자손 선택자는 (띄어쓰기 공백) 이며 앞에서 지정한 요소 (A) 의 안에 위치한 타깃 자손 요소 (B) 를 모두 선택한다.

selectorA selectorB {
    속성: 값;
}

ex 1)

<li> 태그에 속한 <a> 태그에 스타일을 적용하는 방법이다.

li a {
    color: teal; 
}

ex 2)

post에 속한 모든 a 태그에 스타일을 적용하는 방법이다.

.post a {
    color: pink;
}

 

---

자식 선택자

자식 선택자는 앞에서 배웠던 자손 선택자와 달리, (A) 요소 바로 한 단계 밑에 위치한 자식 요소 (B) 만 택한다.

selectorA > selectorB {
    속성: 값;
}

 

---

다음 형제 선택자

다음 형제 선택자+는 앞에서 지정한 요소 바로 다음에 위치한 형제 요소만을 선택한다.
선택자A 바로 다음에 위치한 타깃 형제 요소인 선택자B를 선택하여 스타일을 적용할 수 있다.

selectorA + selectorB {
    속성: 값;
}

 

---

속성 선택자

태그[attribute="value"] 선택자는 지정된 attribute라는 이름의 속성 값이 value와 일치하는 모든 요소를 선택한다.

ex1)

input[type="password"] {
    font-size: 16px
}