[프론트엔드] 7. CSS 선택자

이하나·2022년 1월 13일

CSS html js 패스트캠퍼스 프론트엔드

프론트엔드

목록 보기

8/19

[ 1 ] CSS 선택자

1 ) 기본 선택자

`*`

: 전체 선택자 (Universal Selector)
: 모든 요소를 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span>넷다섯</span>

css >

* {
   font-size: 30px;
   color: purple;
}

`NAME`

: 태그 선택자 (Type Selector)
: 태그 이름이 NAME 인 요소 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span>넷다섯</span>

css >

* {
   font-size: 30px;
}
div {
   width: 200px;
   height: 200px;
   background-color: darkgreen;
}
li {
   color: orange;
}
span {
   color: darkgreen;
}

`.NAME`

: 클래스 선택자 (Class Selector)
: class의 속성값이 NAME 인 요소 선택.

예시 )
html >

<div>
 <ul>
   <li class="one">첫째</li>
   <li>둘째</li>
   <li class="three">셋째</li>
 </ul>
</div>
<span class="one">넷다섯</span>

css >

* {
   font-size: 30px;
}
.one {
   color: orange;
}
.three {
   color: blue;
}

`#NAME`

: 아이디 선택자 (ID Selector)
: id 속성값이 NAME인 요소 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li id="two">둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span id="five">넷다섯</span>

css >

* {
   font-size: 30px;
}
#two {
   color: yellow;
}
#five {
   color: yellowgreen;
}

2 ) 복합 선택자

`NAMEother`

: 일치 선택자 (Basic Combinator)
: 선택자 NAME 과 other을 동시에 만족하는 요소 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li class="two">둘째</li>
   <li id="third">셋째</li>
 </ul>
</div>
<span class="two">넷다섯</span>

css >

* {
   font-size: 30px;
}
li.two {
   color: navy;
}
li#third {
   color: purple;
}

`NAME > other`

: 자식 선택자 (Child Comninator)
: 선택자 NAME의 자식요소 other 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li class="orange">둘째</li>
   <li id="red">셋째</li>
 </ul>
</div>
<span>넷다섯</span>

css >

* {
   font-size: 30px;
}
ul > li {
   color: blue;
}
ul > .orange {
   color: orange;
}
ul > #red {
   color: red;
}

`NAME other`

: 하위 선택자 (Descendant Comninator)
: 선택자 NAME의 하위 요소 other 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li class="orange">둘째</li>
   <li id="red">셋째</li>
 </ul>
</div>
<span>넷다섯</span>

css >

* {
   font-size: 30px;
}
div li {
   color: blue;
}
ul .orange {
   color: orange;
}
div #red {
   color: red;
}

NAME + other

: 인접 형제 선택자 (Adjacent Sibling Combinator)
: 선택자 NAME 의 다음 형제 요소 other 하나 선택.
예시 )
html >
<div>
 <ul>
   <li id="first">첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span>넷다섯</span>
css >
* {
   font-size: 30px;
}
#first + li {
   color: orange;
}

NAME ~ other

: 일반 형제 선택자 (General Sibling Combinator)
: 선택자 NAME 다음 형제요소 other을 모두 선택.
예시 )
html >
<div>
 <ul>
   <li id="first">첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span>넷다섯</span>
css >
* {
   font-size: 30px;
}
#first ~ li {
   color: red;
}

3 ) 가상 클래스 선택자 (Pseudo-Classes)

NAME:hover

: 선택자 NAME 요소에 마우스 커서가 올라가 있는 동안 선택됨.
예시 )
html >
<div>
 <ul>
   <li class="first">첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span>넷다섯</span>
css >
* {
   font-size: 30px;
}
.first:hover {
   color: purple;
}
off
on

NAME:active

: 선택자 NAME 요소를 마우스로 클릭하고 있는 동안만 선택됨.
예시 )
html >
<div>
 <ul>
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span class="ff">넷다섯</span>
css >
* {
   font-size: 30px;
}
.ff:active {
   color: blue;
}
off
on

`NAME:focus`

: 선택자 NAME 요소가 포커스 되면 선택됨.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<input type="text" />

css >

* {
   font-size: 30px;
}
input {
   border-radious: 15px;
   background-color: darkgreen;
}

`NAME:first-child`

: 선택자 NAME 가 형제 요소 중 첫째라면 선택.

예시 )
html >

<div>
 <ul>
   <li class="first">첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span>넷다섯</span>

css >

* {
   font-size: 30px;
}
div .first:first-child {
   color: brown;
}

`NAME:last-child`

: 선택자 NAME 가 형제 요소 중 막내라면 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li>둘째</li>
   <li class="last">셋째</li>
 </ul>
</div>
<span>넷다섯</span>

css >

* {
   font-size: 30px;
}
ul > .last:last-child {
   color: red;
}

`NAME:nth-child`

: 선택자 NAME 가 형제 요소 중 N번째라면 선택.

예시 )
html >

<div>
 <ul>
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
</div>
<span>넷다섯</span>

css >

* {
   font-size: 30px;
}
li:nth-child(2n+1) {
   color: beige;
}

`NAME:not(other)`

: 선택자가 other 가 아닌 NAME 요소 선택.

예시 )
html >

<div>
 <ul class="num">
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
 <span>넷다섯</span>
</div>

css >

* {
   font-size: 30px;
}
span:not(.num) {
   color: green;
}

4 ) 가상 요소 선택자 (Pseudo-Elements)

NAME::before

: 선택자 NAME 의 내부 앞에 내용 삽입.
: 필수 = content
예시 )
<span>
 이것은 내용~!
</span>
<span>
 이것도 내용~!
</span>
* {
   font-size: 30px;
}
span::before {
   content: "짜잔!";
}

NAME::after

: 선택자 NAME 의 내부 뒤에 내용 삽입.
: 필수 = content
예시 )
<span>
 이것은 내용~!
</span>
* {
   font-size: 30px;
}
span::after {
   content: "짜잔!";
}

5 ) 속성 선택자 (Attribute)

`[NAME]`

: 속성 NAME 을 포함하고 있는 요소 선택.

예시 )

<div>
 <ul class="num">
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
 <span class="ff">넷다섯</span>
</div>

* {
   font-size: 30px;
}
[class] {
   color: blue;
}

`[NAME=other]`

: 속성 NAME 을 포함하고 값이 other인 요소 선택.

예시 )

<div>
 <ul class="num">
   <li>첫째</li>
   <li>둘째</li>
   <li>셋째</li>
 </ul>
 <span class="ff">넷다섯</span>
</div>

* {
   font-size: 30px;
}
[class="ff"] {
   color: red;
}

[ 2 ] CSS 우선순위

!important

인라인 선언

ID선택자 ( 100 )

Class선택자 ( 10 )

태그선택자 ( 1 )

예시 )
.list li.num { color: red;} - 21
.list li:active { color: red;} - 21
.list li::before { content: "hello";} - 12
#list li { color: red;} - 101
li:not(.num) { color: red;} - 10

[ 마무리 ] 4일차를 마치며...

우선순위 명시도 계산에 관해서는 아직도 헷갈리기도 하지만 그래도 아무것도 몰랐을 때 왜 이 css적용이 안될까 하던 의문의 해답을 알기에는 충분하다.
또, 여러 css 선택자를 알게되면서 예전에 쓰던 것만 쓰던 때와 달리 좀더 css 세부적으로 적용할 수 있게 되었다는 것에 대해 만족한다.

이하나

코딩을 배우는 비전공자 코린이!

이전 포스트

[프론트엔드] 6. CSS 개요

다음 포스트

[프론트엔드] 7. CSS 선택자