CSS 스타일 시트를 만들 때 꼭 필요한게 선택자, 선언이다.
이 포스트에서는 선택자에 대해 알아보자.
CSS 선택자
선택자 = rule set의 맨 앞에 있는 HTML 요소, ID, Class, 속성, 수도 클래스 등의 이름을 기재하여 스타일 시트를 지정해줄 수 있다.
이 예에서는, h1과 p가 선택자다.
요소 / type 선택자
h1, p와 같은 html 요소를 입력한다.
Here’s a p with some text.
Here’s a span with more text.
span { background-color: #FFCCCC; }
<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.
* [lang^=en] { color: green; } *.warning { color: red; } *#maincontent { border: 1px solid blue; }
<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.
#identified { background-color: skyblue; }
<div id="identified">This div has a special ID on it!</div> <div>This is just a regular div.</div>
Class 선택자
.과 함께 html에서 선언한 class를 입력한다.
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; }
<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 속성이 있는 요소를 선택한다.
하이퍼링크
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; }
<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!
世界您好!
世界您好!
世界您好!
/* 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; }
<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 선택자
button:hover{ color:red; }
<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 내 맘에
나는 또 다시 한번 말해
하루만 옆에 있고픈데
계속 바쁘기만 하면 진짜 뭐해
/* The first line of everyelement. */ p::first-line { color: blue; text-transform: uppercase; }
<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 선택자를 참고하자.