CSS 선택자 (selector)

4 분 소요

CSS 선택자

▶️ 주요 선택자

1. Type Slelector

태그이름을 통해서 선택한다 (유형선택자, 요소선택자, 타입선택자…)

div {
    background-color: skyblue;
}

HTML문서 내에 모든 요소들에 적용한다
일관적으로 적용할때 사용
보통 상단부에 작성한다(컨벤션)

2. Id Selector

전역속성인 id를 통해서 선택한다

#box {
    background-color: skyblue;
}

중복없이 유일하다(HTML문서 내 단 한개)
id앞에 #을 붙여서 표기한다

3. Class Selector

전역속성인 class를 통해서 선택한다

.box {
    background-color: skyblue;
}

여러개의 요소에 지정할 수 있고 한 요소에 여러개의 class를 가질 수도 있다(공백으로 구분)
class앞에 .을 붙여서 표기한다

▶️ 속성선택자 (Attribute Selector)

태그의 속성을 통해서 선택한다

태그마다 가지고 있는 속성이 다름을 이용한다

1. [attr]

요소가 해당 속성을 가지고 있는지로 선택

a[target] {
    color: yellowgreen;
}

2. [attr=value]

요소의 해당 속성이 어떤값을 가지고 있는지로 선택

input태그의 type별로 작성할때 많이 사용된다

a[target="_blank"] {
    color: yellowgreen;
}

3. [attr^=value]

요소의 속성의 값이 시작되는 것으로 선택

/* type태그 중에 값이 t로 시작하는 input태그에 적용  */
input[type^="t"] {
    background-color: black;
} 
/* type="text" */
/* type="time" */
/* type="tel" */

4. [attr$=value]

요소의 속성의 값이 끝나는 것으로 선택

/* type태그 중에 값이 t로 끝나는 input태그에 적용  */
input[type$="t"] {
    background-color: black;
}
/* type="text" */
/* type="submit" */
/* type="reset" */

5. [attr*=value]

요소의 속성의 값이 적어도 하나 이상 포함하는 것을 기준으로 선택

/* type태그 중에 값이 t를 포함하는 input태그에 적용  */
input[type*="t"] {
    background-color: black;
}
/* type="text" */
/* type="submit" */
/* type="reset" */
/* type="tel" */
/* type="time" */

▶️ 가상클래스 선택자 (Pseudo-Class Selector)

조건을 입력(:)해서 범위를 좁힌다

1. :first-child

형제요소들 중에서 첫번째 요소를 선택

li:first-child {
    color: skyblue;
}

2. :last-child

형제요소들 중에서 마지막 요소를 선택

li:last-child {
    color: skyblue;
}

3. :nth-child()

형제요소들 중에서 숫자로 지정해서 선택

li:nth-child(2n) {
    color: skyblue;
}

n을 입력해서 함수처럼 사용가능하다(1번째부터 시작)
2n : 짝수
even : 짝수
2n-1 : 홀수
odd : 홀수

4. :first-of-type

타입들(태그이름)중에 첫번째 요소를 선택

li:first-of-type {
    color: skyblue;
}

5. :last-of-type

타입들(태그이름)중에 마지막 요소를 선택

li:last-of-type {
    color: skyblue;
}

6. :nth-of-type()

타입들(태그이름)중에 숫자로 지정해서 선택 (nth-child와 비슷)

li:nth-of-type(2n) {
    color: skyblue;
}

n을 입력해서 함수처럼 사용가능하다(1번째부터 시작)
2n : 짝수
even : 짝수
2n-1 : 홀수
odd : 홀수

7. :not()

괄호 내부의 요소의 셀렉터를 제외하고 선택

selector:not(selector){
    ...
}

input:not(input[type="text"]){
    background-color: black;
}

attr selector와 함께 할 수 있다

8. :link, :visited

방문기록을 사용해서 방문했는지 방문하지 않았는지에 따라 바뀐다.

/* HTML */
<a href="address">Link</a>

a:link {
    color: tomato;
}
a:visited {
    color: skyblue;
}

방문하지 않은 경우 토마토색상
방문했던 경우 하늘색
상태에 따라 css를 바꿔줌 (동적 가상클래스 선택자)

9. :hover

마우스를 해당 요소에 올려두었을때 css를 변경해준다

button {
    background-color: white;
}
button:hover {
    background-color: skyblue;
}

마우스를 올려두기 전에는 흰색, 마우스를 해당 요소위에 올려두면 하늘색으로 바뀐다
다른 선택자들과 조합해서도 사용 가능하다

10. :active

마우스로 클릭하고 떼기전의 상태(mousedown 상태)일때 css를 변경해준다

button {
    background-color: white;
}
button:active {
    background-color: yellowgreen;
    color: black;
}

link나 button에 많이 사용된다
link, visited, hover, active 선택자를 사용할때는 LVHA(link-visited-hover-active)순서에 따라서 하는것을 권장(무시될 수 있기 때문에)

11. :focus

포커싱(선택되었을 때 - input에 입력할때, 버튼을 누를때 등)이 되었을때 css를 변경해준다

button {
    background-color: white;
}
button:active {
    background-color: blue;
    color: black;
}

12. :enabled

활성화되어 있는 요소에만 css를 변경

input[type=text]:enabled {
    background-color: black;
}

13. :disabled

비활성화되어 있는 요소에만 css를 변경

input[type=text]:disabled {
    background-color: black;
}

14. :checked

check된 요소만 css를 변경

input[type-checkbox]:checked {
    outline: 3px solid skyblue;xw
}

▶️ 가상 요소 선택자 (Pseudo-Element Selector)

클래스가 없지만 있는것처럼 동작(실제로 존재하지 않는 범위를 만듬)

::를 붙여서 표현(css3)
:하나만 붙여서 표현(css3 이전)

::를 붙여서 가상 클래스 선택자와 구분해준다

이전에 읽어봤던 블로그 포스팅에 의하면 구형 브라우저에서는 ::를 지원하지 않기 때문에 크로스브라우저 차원에서 :를 하나로 사용한다는 것을 본 적이 있다

(해당 글의 본문)
차이는 없다. 오히여 더블콜론(::)::before을 쓴다면 ie8 이하 버전은 적용이 되지 않기 때문에 클론 하나만(:):before 쓰는 것이 좋다고 볼 수 있다. css2에서는 콜론이 하나였다가, css3에는 더블클론으로 바뀌었다.
https://green-webdesigner.tistory.com/20

1. ::before, ::after

::before: 해당 요소의 앞에 가상의 요소를 생성한다 ::after: 해당 요소의 뒤에 가상의 요소를 생성한다

.box::before {
    content: "before";  ← 원하는 텍스트를 기입한다    
    color: skyblue;
}
.box::before {
    content: "after";    
    color: skyblue;
}

해당 요소를 드래그 했을때 선택이 되지 않는다

2. ::first-letter, ::first-line, ::selection

first-letter: 첫 번째 글자에만 css를 적용 first-line: 첫 번째 줄에만 css를 적용 selection: 텍스트를 드래그 했을때의 css를 적용

p::first-letter {
    font-size: 1.5em;
    color: skyblue;
}
p::first-line {
    font-size: 1.5em;
    color: skyblue;
}
p::first-letter {
    font-size: 1.5em;
    color: skyblue;
}

::before와 함께 사용되면 before가 제일 앞에 위치하기 때문에 before에도 적용이 된다

▶️ 선택자 결합

선택자들을 결합하거나, 하위 선택자 등을 사용해서 더욱 세부적으로 요소들을 선택할 수 있다

1. 하위 선택자

공백으로 구분해서 보다 세부적으로 요소들을 선택할 수 있다.

앞쪽이 있는것이 상위 요소, 뒤에 위치하는 것이 하위요소이다

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

2. 자식 선택자

꺽쇄(>)를 이용해서 구분한다 앞쪽에 위치한 것의 바로 자식요소들을 선택한다

.list > li {
    color: red;
}

3. 형제 선택자

일반 형제 선택자 결합 (~) ~ 앞에 위치한 요소의 형제요소이지만, 코드위치상으로 뒤쪽에 위치한 것을 선택
```
 <p>p-1</p>
 <div>div-1</div>
 <p>p-2</p>
 <p>p-3</p>
```
```
 div ~ p {
     color: red;
 }
```
p-2와 p-3만 color가 red가 된다
인접 형제 선택자 결합 (+) +앞에 위치한 요소의 형제요소중애서 코드 위치상 바로 다음 요소를 선택
```
 <p>p-1</p>
 <div>div-1</div>
 <p>p-2</p>
 <p>p-3</p>
```
```
 div + p {
     color: red;
 }
```
p-2만 color가 red가 된다

4. 그룹화

,를 사용해서 여러개의 요소를 선택할 수 있다

div, span {
    background-color: skyblue;
}

div와 span 모두 background-color가 skyblue가 된다

▶️ 범용선택자 (Universal Selector)

(전체선택자) *을 사용해서 모든 요소를 선택한다

* {
    color: skyblue;
}

보통 파일의 맨 위에서 사용한다
중간에서 사용하게 되면 잘못되었을때 찾기가 어렵다

▶️ 상속제어

css는 기본적으로 상속이 되는데 이것을 제어할 수 있다

1. initial

상속을 받지 않도록 한다

2. inherit

무조건 상속값을 사용하도록 지정함

3. unset

부모로 받은 상속값이 존재할때: inherit으로 동작
부모에게 상속받을 값이 없을때: initial로 동작

→ 보통 초기화를 할때 사용한다

▶️ 우선순위

선언된 위치에 따라서 적용 인라인스타일 > 내부스타일과 외부 스타일 중 html 문서의 코드 위치상 뒤에 작성된것
명시도가 높은것(적용범위가 낮은것)이 우선됨
- !impoirtant
- inline sytle
- Id
- Class/Attribute/Pseudo Class
- Type
- *
- 상속받은 값
코드상에서 늦게 작성된 것이 우선된다

Twitter Facebook LinkedIn

원종빈