여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. CSS - 기초 - 선택자
CSS – 기초 – 선택자
8개월전 작성
8개월전 수정

CSS 스타일 시트를 만들 때 꼭 필요한게 선택자, 선언이다.

이 포스트에서는 선택자에 대해 알아보자.

CSS 선택자

선택자 = rule set의 맨 앞에 있는 HTML 요소, ID, Class, 속성, 수도 클래스 등의 이름을 기재하여 스타일 시트를 지정해줄 수 있다.

선택자
이 예에서는, h1과 p가 선택자다.

선택자
요소 / type 선택자
:
h1 / p와 같이 html 요소를 바로 입력한다.
범용 선택자
:
* 를 입력하여 모든 유형의 요소를 선택한다.
id 선택자
:
#과 함께 html에서 선언한 id를 입력한다.
class 선택자
:
.과 함께 html에서 선언한 class를 입력한다.
속성 선택자
:
a[title], a[href=”https://example.com”]와 같이 HTML 속성이 있는 요소를 선택한다.
Pseudo-class 선택자
:
a:hover { }.
Pseudo-elements 선택자
:
p::first-line { }

요소 / type 선택자

h1, p와 같은 html 요소를 입력한다.

기본 예시
Here’s a span with some text.

Here’s a p with some text.

Here’s a span with more text.

 

CSS
span {
  background-color: #FFCCCC;
}
HTML
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>

범용 선택자

* 를 이용하여 모든 유형의 요소를 선택한다.

기본 예시

A green span in a red paragraph.

A red span in a green paragraph.

 

CSS
* [lang^=en] {
  color: green;
}

*.warning {
  color: red;
}

*#maincontent {
  border: 1px solid blue;
}
HTML
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>

ID 선택자

#과 함께 html에서 선언한 id를 입력한다.

기본 예시

This div has a special ID on it!

This is just a regular div.

 

CSS
#identified {
  background-color: skyblue;
}
HTML
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>

Class 선택자

.과 함께 html에서 선언한 class를 입력한다.

CSS
기본 예시

This paragraph has red text.

This paragraph has red text and a yellow background.

This paragraph has red text and “fancy” styling.

This is just a regular paragraph.

 

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}
HTML
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>

속성 선택자

a[title], a[href=”https://example.com”]와 같이 HTML 속성이 있는 요소를 선택한다.

하이퍼링크

 

CSS
a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}
HTML
<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>

언어

기본 예시

Hello World!

Olá Mundo!

世界您好!

世界您好!

世界您好!

 

CSS
/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
  font-style: italic;
}

/* All divs in US English are blue. */
div[lang~="en-us"] {
  color: blue;
}

/* All divs in Portuguese are green. */
div[lang="pt"] {
  color: green;
}

/* All divs in Chinese are red, whether
   simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* All divs with a Traditional Chinese
   `data-lang` are purple. */
/* Note: You could also use hyphenated attributes
   without double quotes */
div[data-lang="zh-TW"] {
  color: purple;
}
HTML
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">世界您好!</div>

사용할 수 있는 선택자는 MDN Web Docs - 속성 선택자를 참고하자.

Pseudo-class 선택자

기본 예시

 

CSS
button:hover{
color:red;
}
HTML
<button>버튼</button>

nth-child

자식 요소를 선택할 수 있는 선택자는 nth-child(n)가 이용된다.

nth-child(1), nth-child(2)와 같이 몇번째 자식 요소인지 지정할 수 있고 nth-child(2n) = nth-child(even)과 같이 짝수 자식 요소만 지정할 수 있고, nth-child(2n-1) = nth-child(odd)와 같이 홀수 자식 요소만 지정할 수 있다.

이 때 하위요소가 모두 동일한 요소여야한다. 예를 들어, 모두 다 div / 모두 다 li 등…

 

 

사용할 수 있는 선택자는 MDN Web Docs - Pseudo-class 선택자를 참고하자.

Pseudo-elements 선택자

기본 예시
고개를 떨궈 나 여태
온종일 핸드폰을 보네
뭣도 안 잡혀 내 손에
모든 게 복잡해 머릿속엔

Gimme some Gimme some 내 맘에
이미 난 수십 번을 말해
하루만 함께 하고픈데
계속 바쁘기만 하면 나는 뭐해
두 손을 모아 기도해
Oh girl 난 네가 필요해
My clock is ticking’ like (oh yeah)
이젠 알아줘 내 맘을 Baby
Falling Falling
이젠 내게 call me call me
너는 지금 뭐해 뭐해
시간은 가는데
Baby I’m Falling Falling
다시 내게 call me call me
너는 지금 어디에 어디에
이젠 내게 와줘
어서 내게 말해줘
다른 일들은 미뤄
Feelin’like I’m dizzy
현기증이 나네 빨리 Call me
Gimme some Gimme some 내 맘에
나는 또 다시 한번 말해
하루만 옆에 있고픈데
계속 바쁘기만 하면 진짜 뭐해

 

CSS
/* The first line of every 

element. */ p::first-line { color: blue; text-transform: uppercase; }

HTML
<p>고개를 떨궈 나 여태
온종일 핸드폰을 보네
뭣도 안 잡혀 내 손에
모든 게 복잡해 머릿속엔</p>

<p>Gimme some Gimme some 내 맘에 
이미 난 수십 번을 말해
하루만 함께 하고픈데
계속 바쁘기만 하면 나는 뭐해
두 손을 모아 기도해
Oh girl 난 네가 필요해
My clock is ticking' like (oh yeah)
이젠 알아줘 내 맘을 Baby
Falling Falling
이젠 내게 call me call me
너는 지금 뭐해 뭐해
시간은 가는데
Baby I'm Falling Falling
다시 내게 call me call me
너는 지금 어디에 어디에
이젠 내게 와줘
어서 내게 말해줘
다른 일들은 미뤄
Feelin'like I'm dizzy
현기증이 나네 빨리 Call me
Gimme some Gimme some 내 맘에
나는 또 다시 한번 말해
하루만 옆에 있고픈데
계속 바쁘기만 하면 진짜 뭐해</p>

사용할 수 있는 선택자는 MDN Web Docs - Pseudo-elements 선택자를 참고하자.

참고
관련 포스트
CSS - 기초 - 선택자 - 현재글
Mingg`s Diary
밍구
공부 목적 블로그