CSS selector에 대해

CSS(Cascading Style Sheets)는 HTML 요소(Element)의 스타일을 주는 역할을 하는데, 스타일을 적용하고자하는 HTML 요소를 특정할 필요가 있다.
선택자(selector)에 대해 알아보자.

ruleset, html 페이지의 특정 요소를 어떻게 렌더링할 것인지 브라우저에 알려주는 css이다. 스타일에 관한 규칙을 문장처럼 나타낸다.

기본 CSS selector

1. 전체 셀렉터

규칙: *
설명: HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다) 주로 box-sizing처럼 문서 전체에 한번에 적용해야하는 스타일이 있을때 사용한다.

* {
box-sizing: border-box;
}

2. 태그 셀렉터

규칙: 태그이름
설명: 지정된 태그명을 가지는 요소를 선택한다.

3. ID 셀렉터 (ID Selector)

규칙: #id이름
설명: id값을 선택하는 셀렉터입니다. id는 html에서 중복되어 사용할 수 없다.

4. 클래스 셀렉터 (Class Selector)

규칙: .class이름
설명: class값을 선택하는 셀렉터. class는 html문서에서 중복되어 쓸 수 있다.

5. 태그,ID,클래스 복합 셀렉터

규칙: 태그#id이름 태그.class이름 #id이름.class이름
설명: 태그와 id, class값을 혼합해서 선택하는 셀렉터다. 요소를 구체적으로 언급해야할때 사용하고, 띄어쓰기가 없는 것에 주의해야한다.(뒤에서 등장하지만 띄어쓰기가 있는방식은 후손요소를 선택하는 셀렉터입니다.)

/* p태그이면서 titleWrap라는 클래스값을 가지는 요소를 선택*/
p.titleWrap {
font-size: 100px;
} 

/ p태그이면서 #inputid 이라는 id값을 가지는 요소를 선택/
p#inputid {
text-decoration: underline;
}

## 6. 어트리뷰트 셀렉터 (Attribute Selector)

> 규칙: 셀렉터[어트리뷰트]
설명: 지정된 어트리뷰트(속성값)을 가지는 모든 요소를 선택합니다.


```javascript
a[href] { color: yellow; } 

복합 CSS selector

후손 셀렉터

자신의 1 level 상위에 속하는 요소를 부모 요소, 1 level 하위에 속하는 요소를 자손 요소(자식 요소)라고 한다. 자신보다 하위 level에 속하는 요소는 후손 요소(하위 요소)라 한다.

규칙: 셀렉터A 셀렉터B
설명: 후손 셀렉터는 셀렉터A의 모든 후손(하위) 요소 중 셀렉터B와 일치하는 요소를 선택합니다. 셀렉터B를 선택한다는게 핵심이다!

  /* div 요소의 후손요소 중 p 요소 */
    div p { color: red; }

자식 셀렉터 (Child Combinator)

규칙: 셀렉터A > 셀렉터B
설명: 자손 셀렉터는 셀렉터A의 모든 자식 요소 중 셀렉터B와 일치하는 요소를 선택한다.

 /* div 요소의 자식요소 중 p 요소 */
    div > p { color: red; }
```


## 형제(동위) 셀렉터 (Sibling Combinator)


![](https://velog.velcdn.com/images/yellowbutter0327/post/6260764b-efdf-4dcd-8529-aa913c8d4c71/image.png)


### 인접 형제 셀렉터(Adjacent Sibling Combinator)



> 규칙: 셀렉터A + 셀렉터B설명: 셀렉터A의 형제 요소 중 셀렉터A 바로 뒤에 위치하는 셀렉터B 요소를 선택한다. A와 B 사이에 다른 요소가 존재하면 선택되지 않는다.

```javascript
  <style>
    /* p 요소의 형제 요소 중에 p 요소 바로 뒤에 위치하는 ul 요소를 선택한다. */
    p + ul { color: red; }
  </style>

  <p>The first paragraph.</p>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>
```

### 일반 형제 셀렉터(General Sibling Combinator)

> 규칙: 셀렉터A ~ 셀렉터B
설명: 셀렉터A의 형제 요소 중 셀렉터A 뒤에 위치하는 셀렉터B 요소를 모두 선택한다.

```javascript
<style>
    /* p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택한다.*/
    p ~ ul { color: red; }
 </style>
```

![](https://velog.velcdn.com/images/yellowbutter0327/post/3ac15e6e-9162-4bb1-9a28-53c6f2d4cfff/image.png)



# 가상 클래스 셀렉터 (Pseudo-Class Selector)

가상 클래스 셀렉터는 원래 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다. 마우스가 들어왔을때 등의 특정 상태에만 적용되는 가상의 클래스를 지정해주는 것이다.

가상 클래스는 마침표(.) 대신 콜론(:)을 사용하며 CSS 표준에 의해 미리 정의된 이름이 있기 때문에 임의의 이름을 사용할 수 없다는 특징이 있다.

다음은 div 요소가 hover 상태일 때(마우스가 올라와 있을 때) background-color를 yellow로 지정하는 예시이다.

```javascript
<style>
    /* a 요소가 hover 상태일 때 */
    a:hover { color: red; }
    /* input 요소가 focus 상태일 때 */
    input:focus { background-color: yellow; }
 </style>
```

### 동적 셀렉터(User action pseudo-classes)
:link 셀렉터가 방문하지 않은 링크일 때
:visited 셀렉터가 방문한 링크일 때
:hover 셀렉터에 마우스가 올라와 있을 때
:active 셀렉터가 클릭된 상태일 때
:focus 셀렉터에 포커스가 들어와 있을 때

### 구조 가상 클래스 셀렉터(Structural pseudo-classes)
:first-child 셀렉터에 해당하는 모든 요소 중 첫번째 자식인 요소를 선택
:last-child 셀렉터에 해당하는 모든 요소 중 마지막 자식인 요소를 선택
:nth-child(n) 셀렉터에 해당하는 모든 요소 중 앞에서 n번째 자식인 요소를 선택
:nth-last-child(n) 셀렉터에 해당하는 모든 요소 중 뒤에서 n번째 자식인 요소를 선택
:nth-child(odd) 셀렉터에 해당하는 모든 요소 중 홀수번째 자식인 요소 선택

nth-child(even) 셀렉터에 해당하는 모든 요소 중 짝수번째 자식인 요소 선택

### 부정 셀렉터(Negation pseudo-class)
:not(셀렉터) 셀렉터에 해당하지 않는 모든 요소를 선택

```javascript
  <style>
    /* input 요소 중에서 type 어트리뷰트의 값이 password가 아닌 요소를 선택 */
    input:not([type=password]) {
      background: yellow;
    }
  </style>
```




> 
<출처>  
[포인마웹 css 일부](https://poiemaweb.com/css3-selector) 
[selector 개념 정리](https://velog.io/@rimu/css-css-%EC%84%A0%ED%83%9D%EC%9E%90selector-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC)