2. 선택자 (셀렉터)

CSS 규칙을 적용할 요소를 선택하는 것
특정 html 요소를 선택하여 css / js 를 적용시킨다.

1. 주요 선택자

Type Selector

// Type Selector
h2 {
    color: red;
}

하나의 Html 문서에 있는 모든 해당 태그에 적용된다.
특정 요소만 선택하고 싶으면 사용하지 않기
전체 문서에서 일관적으로 적용하고 싶을 때 사용한다.

ID Selector

<h1 id="welcome">

#welcome {
    color: red;
}

전역 속성으로 어디든 사용 가능하다.
이름표
한 문서 내에서 유일(unique) 해야한다.
# id명
한 요소에 하나의 id 적용. 2개 이상 안된다

Class Selector

<h1 id="blue">
<ul class="blue red">

.blue {
    color: red;
}

전역 속성으로 어디든 사용 가능하다.
중복이 가능하다
전혀 다른 태그의 종류에도 사용 가능 (h2/ul)
한 요소에 여러개의 class 적용 가능
2개 이상의 class는 공백으로 구분

2. 속성 선택자(Attribute Seletor)

[attr=value]

<a href="http://example.com" target="_blank">
<input type="text">
<input type="submit">
<input type="reset">

a[target] {
    color: hotpink
}

a[href="https://example.org"] {
    color: indigo;
}

👍👍
input[type="submit"] {
    background-color: green;
}

attr : 요소 내의 속성 (href, target …)
[attr=value] 와 정확하게 일치해야지만 인식된다.
input 에 많이 활용된다.

[attr^=value]

<a href="http://example.com" target="_blank">

// http로 시작하는 모든 요소들이 선택된다
a[href^="http"] {
    color: indigo;
}

캐럿 사인
해당 문자열로 시작되는 요소를 찾는다.

[attr$=value]

<a href="http://example.com" target="_blank">

// 해당 문자열로 끝나는 요소를 찾는다.
a[href$=".com"] {
    color: indigo;
}

달러 사인
해당 문자열로 끝나는 요소를 찾는다.

[attr*=value]

<a href="http://example.com" target="_blank">

// 적어도 하나를 가진 것을 선택한다
a[href*=".com"] {
    color: indigo;
}

적어도 하나를 가진 것을 선택한다

3. 가상클래스 선택자 (Pseudo-Class Selector)

더욱 더 범위를 좁혀서 요소를 선택하는 선택자

first-child

<ul>
    // 이 경우 li의 부모(ul)의 첫번째 자식이 movie가 없으니 아무것도 적용되지 않는다.
    <li>a</li>
    <li class"movie">b</li>
    <li class"movie">c</li>
    <li class"movie">d</li>
    <li class"movie">e</li>
</uㅣ>

// first-child
li:first-child {
    color: green;
}

.movie:first-child {
    color: red;
}

요소로서 선택되면, 그 요소의 형제들중에 첫번째 자식이 선택된다.(두 묶음이면 2개)
class 로 선택되면, 그 class 중 첫번째 자식이 선택된다. (only 1)
class 선택자시, 고른 것들 중에서 첫번째 자식이 아니다!
선택된 자식의 부모의 첫번째 자식

last-child

<ul>
    // 이 경우 li의 부모(ul)의 첫번째 자식이 movie가 없으니 아무것도 적용되지 않는다.
    <li>a</li>
    <li class"movie">b</li>
    <li class"movie">c</li>
    <li class"movie">d</li>
    // 마찬가지로 해당 class 삭제 시 적용 안된다
    <li class"movie">e</li>
</uㅣ>


li:last-child {
    color: green;
}

.movie:last-child {
    color: red;
}

nth-child

<ul>
    <li>a</li>
    <li class"movie">b</li>
    <li class"movie">c</li>
    <li class"movie">d</li>
    <li class"movie">e</li>
</uㅣ>


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

// first-child와 동일하다
.movie:nth-child(1) {
    color: red;
}

// 자연수 뿐만이 아닌 함수도 적용된다.
// odd, even도 가능
.movie:nth-child(2n) {
    color: red;
}

first-of-child

<section>
    // 타입들 중 첫번째이므로 div 중 첫번째, p 중 첫번째 둘다 선택된다!
    <div class="movie">a</div> ⭐️⭐️
    <p class="movie">b</p> ⭐️⭐️
    <p class="movie">c</p>
    <p class="movie">d</p>
    <p class="movie">e</p>
</section>

// first-child
// 이 형제의 첫번째 자식은 div므로 아무것도 선택되지 않는다.
p:first-child{
    color : red;
}

// first-of-child
// 특정 타입들 중 첫번째
// 위의 first-child 문제 해결 가능
p:first-of-child{ ⭐️⭐️
    color : red;
}

first-of-type은 first-child를 보완했다.
대부분 같은 기능을 하지만 위의 코드의 오류를 해결 가능
first-child보다는 first-of-type 사용 지향!

last-of-child, nth-of-child

first-of-child 와 동작 원리 같다.

not

selector:not(selector) {

}

<form>
    <input type="text" placeholder="name">
    <input type="email" placeholder="email">
    <input class="pw" type="password" placeholder="password">
    <input type="submit">
</form>

// pw 클래스를 제외한 input에 적용
input:not(.pw) {
    background-color: red;
}

// 내부는 선택자는 모두 가능하기 때문에 attr 도 가능
input:not([type=password]) {
    background-color: red;
}

// placeholder 없는 속성
input:not([placeholder]) {
    background-color: red;
}

부정의 의미
뒤쪽 selector를 제외한 나머지
특정 선택자를 제외한 선택자에 일괄 적용할 때 사용

4. 동적 가상 클래스 선택자

html 의 요소의 상태에 따라서 스타일을 변경할 수 있는 동적 가상 클래스 선택자.
ex) 마우스 오버시, 클릭 시 스타일 변경

link, visited

<a href="http://example.com>example link</a>

// 방문 안한 경우
a:link {
    color: tomato;
}

// 방문 한 경우
a:visited {
    color: yellow;
}

하이퍼링크의 상태에 따라 변한다.
기본 : 유저가 한번도 방문을 안하면 파랑색
기본 : 방문을 하면 보라색
크롬 브라우저의 방문기록에 의하여 반영된다.
link : 방문 안 했을 때
visited : 방문 했을 때

hover, link, active, focus

<input type="button" value="저를 클릭하세요!">
<input type="button" value="저를 클릭하세요!">
<input type="button" value="저를 클릭하세요!">
<input type="button" value="저를 클릭하세요!">
<input type="text" value="저를 클릭하세요!">

input[type=button] {
    background-color: skyblue;
    border: none;
}

// 마우스를 올렸을 때
input[type=button]:hover {
    background-color: red;
    border: none;
}

// 마우스를 클릭하고 떼기 전까지의 상태 (mouse down)
input[type=button]:active {
    background-color: skyblue;
    border: none;
}

// 포커싱 됐을 때 (tab)
// text의 경우 클릭했을 때나 작성중일 때
input[type=text]:focus {
    background-color: skyblue;
    border: none;
}

유저가 마우스를 올리거나 클릭하는 등의 동작
input button 은 type selector 활용하기
hover : 마우스를 올렸을 때
active : 마우스를 클리하고 떼기 전까지의 상태
active는 lilnk, visited, hover가 우선순위를 이긴다 (active 진다.) 따라서 뒤에 배치하기 (LVHA 순서)
focus : 포커싱 됐을 때

enabled, disabled, checked

<div>
    <input type="text" placeholder="1">
    <input type="text" placeholder="2">
    <input type="text" placeholder="3" disabled>
</div>

<div>
    <input type="radio" name="myinput" id="yes" checked>
    <label for="yes">Yes</label>

    <input type="radio" name="myinput" id="no">
    <label for="no">NO\o</label>
</div>


// enabled, disabled 아무것도 명시하지 않으면 모두 선택
input[type=text] {
    background-color: skyblue;
}

// disabled 적용 안됨 / enabled 적용
input[type=text]:enabled {
    background-color: skyblue;
}

// disabled 적용됨
input[type=text]:disabled {
    background-color: skyblue;
}

// 체크가 된 요소만 적용된다 (radio, checkbox)
input[type=radio]:checked {
    outlink: 3px solid blue;
}

enabled : default 값으로 사용 가능한 요소를 선택
disabled : disabled 가 지정된 요소만 선택
checked : 라디오, 체크박스에서 선택된 요소만 선택
위의 3개 태그 지정 안할 시, 어떤 경우든 다 적용

5. 가상요소 선택자 (Pseudo-Element Selector)

가상 클래스 선택자 -> selector:___
실제로 존재하지 않는 상태에 이름을 붙여준 것
가상 요소 선택자 -> selector::___
selector:___ 도 동작은 된다 (css3 이전) 하지만 지양
상태에 따라서 변경이 아닌 실제로 존재하지 않는 요소나 범위를 만든 것

before, after

<section>
    <p class="movie favorite">b</p> 
    <p class="movie">c</p>
    <p class="movie favorite">d</p>
    <p class="movie">e</p>
</section>

// MOVIE b
.movie::before {
    content: 'MOVIE';
    color : red;
}

// 가장 좋아하는 영화를 꾸며주기 위해 사용
// b⭐️
.favorite::after {
    content: '⭐️';
}

가상 요소 선택자로 만든 요소는 드래그나 복사가 되지 않는다.
그저 스타일적인 요소일 뿐이다.
뱃지같은 것을 붙일 때, 메뉴 사이의 구분바를 추가할 때
컨텐츠 내용이 있지만 그 자체가 의미가 있다기 보단 꾸며주기 위한 것
before : 앞에 출력
after : 뒤에 출력

first-letter, first-line, selection

<section>
    <p class="movie">이것은 예시를 보여주기 위한 텍스트입니다</p> 
    <p class="movie">이것은 예시를 보여주기 위한 텍스트입니다</p> 
    <p class="movie">이것은 예시를 보여주기 위한 텍스트입니다</p> 
    <p class="movie">이것은 예시를 보여주기 위한 텍스트입니다</p> 
</section>

// first-letter : 첫번째 글자에 적용
// "이" 에만 적용
.movie::first-letter {
    color : red;
}

// before 선택자로 컨텐츠 추가시 "M"에 적용
// before가 먼저 적용되기 때문
.movie::before {
    content: 'MOVIE';
    color : red;
}

// 첫번째 줄이 적용된다.
// 개행 기준이기 때문에 반응형으로 인해 내용 증가시 그 내용도 적용된다.
.favorite::first-line {
    color : red;
}

// 선택 영역에 대한 스타일을 적용할 때 (드래그)
.favorite::selection {
    color : red;
    background-color: blue
}

first-letter : 첫 글자
before 선택자 적용시 before가 우선이다.
first-link : 첫 줄
개행 기준이므로 반응형으로 길이 증가하면 모두 적용
selection : 그냥 보기엔 차이가 없다. 선택 영역에 대한 스타일을 적용할 때

6. 선택자 결합

두 가지 선택자를 사용하여 더욱 더 범위를 좁히는 것

<ul>
    <li>리스트1</li>
        <ol>리스트8</ol>
        <ol>리스트9</ol>
    <li>리스트2</li>
    <li>리스트3</li>
    <li>리스트4</li>
</ul>

<ol>
    <li>리스트5</li>
    <li>리스트6</li>
    <li>리스트7</li>
</ol>

// 리스트4, 라스트7
li:last-of-type {
    color: red;
}

// 하위선택자
// 리스트4, 리스트9
// 스페이스 기준으로 하위 선택자를 나눔
// 상위 선택자의 하위에 있는 선택자가 골라짐
// 모든 선택자 종류 사용 가능하다
// 자식의 자식까지 모두 찾는다.
ul li:last-of-type {
    color: blue;
}

// 자식선택자
// 라스트4
// 앞쪽의 선택자의 바로 아래 자식들에서만 찾음
// 직속자식
ul > li:last-of-type {
    color: blue;
}

하위 선택자

ul li:last-of-type {}
스페이스 기준으로 나눈다.
상위 선택자의 하위에 있는 모든 선택자 중 만족하는 것이 골라진다.
자식의 자식까지 모두 찾는다.

자식

ul > li:last-of-type {}
> 기준으로 나눈다.
상위 선택자의 바로 아래 자식들에서만 찾는다.
직속 자식에만 적용할 수 있다.

형제 선택자

<div>
    <p>P</p>
    <span>Span</span>
    <code>Code</code>
    <p>P2</p>
    <div>Div</div>
</div>

// code 의 형제들 중에서 고르게 된다.
// selector는 code 보다 뒤에 있는 요소여야 한다. (p, sapn 적용 못해)
code ~ selector {

}

// 부모 자식 관계가 아닌 특정 요소 뒤에 있는 것을 적용할 때
code ~ p {
    color: red;
}

// 인접 형제 선택자 결합
// code 뒤에 selector 가 온다면 선택된다
// 바로 다음 요소여야 한다.
// 앞 뒤 순서 중요하다
code + selector {
    background-color: blue;
}

// 그룹화
// 여러개를 , 으로 구분하여 한번에 적용
p , span, code {
    color: purple
}

일반 형제 선택자 결합 (~)

형제 중에서 고른다.
selector 는 앞의 요소보다 뒤여야 한다.

인접 형제 선택자 결합 ( + )

형제 중 바로 뒤에 오는 요소가 selector 라면 고른다.
앞 뒤 관계 조심!

그룹화

여러 요소들에게 동시에 같은 css 를 적용하고 싶을 때
, 으로 구분한다.

7. 범용 선택자 (*) (Universal Selector)

* {
    color: red;
}

.red {
    color: blue
}
이건 원래
*.red {
    color: blue
}

// div 와 인접한 모든 선택자
div + * {
    color: red;
}

문서 전체에 적용이 된다.
원래 모든 선택자에는 *이 생략된 것이다.
선택자로서 다른 선택자와 결합될 수 있다.

8. 상속 제어하기

initial, all

<div class="parent>
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

// 하위의 모든 요소들까지 적용된다.
// 본인에게 별도로 지정받지 않았다면 부모의 것을 상속받는다.
// 모든 property가 상속되는 것은 아니다.
.parent {
    color: blue
}

// initial
// 부모의 상속을 받고 싶지 않을 때
// 기본값으로 적용된다.
.child2 {
    color: initial;
    color: initial;
    color: initial;
    color: initial;
    ...
}

// all
// 모든 property에 적용하고 싶지 않을 때
.child2 {
    all: initial;
}

요소들은 본인에게 별도로 지정받지 않았다면 부모의 것을 상속받는다. (특정 property)
initial : 부모의 상속을 받고 싶지 않을 때
all : 모든 property를 상속하고 싶을 때

inherit

<div class="parent>
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

<div class="parent2>
    parent
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

.child1 {
    color: red;
}


.child2 {
    color: blue;
}

.parent2 * {
    color: inherit;
}

.parent2 .child1 {
    all: unset;
}

inherit : 무조건 상속을 받아라
inherit 도 all 가능

unset

부모로부터 상속받을 값이 있을 때 : inherit
부모로부터 상속받을 값이 없을 때 : initial
여러 파일들로부터 import 를 했을 때 다 지우고 내 부모의 상속만 받고 싶을 때 사용

9. 우선순위

like 캐스캐이딩 원칙

선언된 곳
명시도 (적용 범위가 적을수록 명시도가 높은 것)
코드 위치

스타일 적용하는 순서

head > style
link 의 스타일
head > <style>
inline

명시도

Class Selector > Id Selector 순서여도 Class Selector 가 이긴다.

!important (치트키여서 지양하자)
inline
ID
Class / Attribute / Pseudo Class
Type (tag)
*
inherited

나의 회고 🤫

오늘의 내용은 정말 많고, 평소 내가 가장 어려워하고 기피하던 내용이었다.
선택자는 늘 어렵다…ㅠ
또한 내용도 많아서 오늘 공부 열심히 해도 일주일 뒤면 기억이 잘 안 날것을 알기 때문에
오늘의 정리로 끝내지 않고 꼭 실습으로도 적용하도록 노력해야겠다.
선택자 정말 잘 다루고 싶다.
내 기준 선택자를 잘 다루는 사람 == 프론트앤드 능력자👑👑