Universal Selector
* {
margin: 0;
padding: 0;
}
Type/Tag Selector
body {
background-color: red;
/* property */ /* value */
}
<!- you can select multiple tags using , ->
h2,
h3,
h4,
p {
color: blue;
}
Class Selector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS selector - class</title>
<style>
.one {
color: aqua;
}
.two {
border: solid 1px black;
border-top-color: red;
}
.three {
font-size: 48px;
}
</style>
</head>
<body>
<!-- it can have multiple classes but cannot have more than one id. -->
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1 class="one">Hello World</h1>
<h1 class="two three">Hello World</h1>
<h1 class="two">Hello World</h1>
</body>
</html>
Id Selector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS selector - id</title>
<style>
#one {
color: aqua
}
#two {
border: solid 1px black;
}
#three {
font-size: 48px;
}
</style>
</head>
<body>
<!-- elements cannot have more than one id
there can be multiple classes but not id!
usually use class for styling and id for js -->
<!-- a href="#one": go to the place where id one is at -->
<a href="#one">클릭하시오</a>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1 id="one">Hello World</h1>
<h1 id="two">Hello World</h1>
<h1 id="three">Hello World</h1>
</body>
</html>
Children Selector, nested tag selecting
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS selector - child selector </title>
<style>
/* this selects all p tags that are nested inside ul */
ul p {
color: red;
}
/* > (child selector)
> selects nodes that are direct children of the first element.
ul > li will match all <li> elements that are **nested directly** inside a <ul> element. */
/* this selects p tag nested in li */
li>p {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<p>Hello World</p>
</li>
<li>
<div>
<div>
<div>
<p>Hello World</p>
</div>
</div>
</div>
</li>
<li>Hello World</li>
<li>Hello World</li>
</ul>
</body>
</html>
Adjacent Sibling Selector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS selector - adjacent sibling selector</title>
<style>
/* + matches the second element only if it immediately follows the first element. */
/* this selects the first ul that is placed immediately after h1 */
h1+ul {
color: red;
}
/* this selects the second ul after h1 */
h1+ul+ul {
color: blue;
}
</style>
</head>
<body>
<h1>hello world</h1>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</body>
</html>
General Sibling Selector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS selector - general sibling selector</title>
<style>
/* ~ selects siblings.
This means that the second element follows the first (though not necessarily immediately),and both share the same parent.
Selects every <ul> element that is preceded by a <h1> element. */
h1~ul {
color: red;
}
</style>
</head>
<body>
<h1>hello world</h1>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<ul>
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
</body>
</html>
Confusing Selectors ( difference between .one.two and .one .two)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>confusing selectors</title>
<style>
/* .(class) without space : selecting both class */
.one.two {
color: blue;
}
/* class two nested in class one */
.one .two {
color: red;
}
</style>
</head>
<body>
<!-- .one -->
<div class="one">Hello World</div>
<!-- .one.two -->
<div class="one two">Hello World</div>
<!-- .one .two -->
<div class="one">
<div class="two">Hello World</div>
</div>
</body>
</html>
Attribute selector
Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr*=value] [attr|=value] [attr^=value] [attr$=value]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS attribute selector</title>
<style>
/* <a> elements with a href attribute */
a[href] {
font-size: 32px;
}
/* <a> elements with an href matching "http://www.codingisfun.com" */
a[href="http://www.codingisfun.com"] {
font-size: 48px;
}
</style>
</head>
<body>
<a href="#">클릭해!</a>
<a href="http://www.codingisfun.com">클릭해!</a>
<a href="#">클릭해!</a>
</body>
</html>
Attribute Selector 2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Selector 2</title>
<style>
p::after {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background-image: url(https://e1.pngegg.com/pngimages/635/155/png-clipart-emoji-sticker-three-yellow-stars-illustration-thumbnail.png);
background-size: cover;
}
/* 1. tag[attribute] */
/* selecting tag by attribute name */
/* select div that has class attribute */
div[class] {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid black;
}
/* select a tag that has href attribute */
a[href] {
color: gray;
}
/* 2. tag[attribute="value"] */
/* select div that has class named red*/
/* It doesn't include space. So, it's only for selector with class named red. (if it has multiple classes, there's space so this is for the one with one class name)*/
/* div[class="red"] {
background-color: red;
} */
/* 3. tag[attribute~="value"] */
/* select div that has class named red */
/* it includes space. so this will select every dv that's class="red" */
/* for example, if it has class="red blue green", it selects it but if it has class="redbluegreen", it doesn't select it */
/* div[class~="red"] {
background-color: red;
} */
/* or you can also select things with other attribute as well */
/*
img[alt~="dog_pic"] {
width: 200px;
text-decoration: none;
border: 5px solid seagreen;
} */
/* 4. tag[attribute*="value"] */
/* select div that element includes a class that has value of "red"
/* if it has class="redbulegreen", even if it's not exactly "red" but it includes text "red", it gets selected */
/* div[class*="red"] {
background-color: red;
} */
/* 5. tag[attribute^="value"] */
/* select div that has a class and the value starts with "sky" */
/* div[class^="sky"] {
background-color: skyblue;
} */
/* select a that the value of href starts with "http" */
/* a[href^="https"] {
color: red;
} */
/* 6. tag[attribute$="value"] */
/* select div that has class and the value ends with "pink"*/
/* div[class$="pink"] {
background-color: pink;
} */
/* select a that the value of href ends with "kr" */
/* a[href$="kr"] {
color: black;
} */
/* 6. tag[attribute|="value"] */
/* select a that the value of href is http or starts with "http" */
/*
언더바(_), 공백, 합성어가 포함될 경우 적용되지 않으며,
독립된 값이거나 하이픈을 포함하는 값은 선택됩니다.
*/
/* a[href|="http"] {
color: red;
} */
</style>
</head>
<body>
<!-- 팁 1 -->
<!-- 실무에서는 주로 이런식으로 장식적인 요소를 html 태그 없이 구현하고 싶을때 사용한다고 보시면 됩니다. -->
<p>안녕하세요 찡긋~ </p>
<!-- 보강설명 2 -->
<!-- class 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
<div>1</div>
<div class="red">2</div>
<div class="red pink">3</div>
<div class="redpink skyblue pink">4</div>
<div class="skyblue">5</div>
<hr>
<!-- href 속성을 가지고 있지 않아 스타일 설정이 되지 않음 -->
<a></a>
<a href="http://paullab.co.kr">바울랩1</a>
<a href="http://paullab.com">바울랩2</a>
<a href="https://paullab.com">바울랩3</a>
<a href="http">바울랩4</a>
<a href="http-paullab">바울랩5</a>
</body>
</html>
Pseudo Class, Pseudo Selector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS pseudo-classes selector 가상 클래스 선택자</title>
<style>
/* like
a:hover { } p:nth-child(1) , these are unexisting class in htmml but it behaves like it has actual class. So it's called pseudo-classes selector
*/
/* .foo:nth-child(odd) {
color: red;
}
* .foo:nth-child(even) {
color: red;
}
.foo:nth-child(3) {
color: red;
} */
/* .foo:nth-child(2n+1) {
color: red;
} */
/*
.foo:first-child :
select the first child of element that has class="foo"
.foo:last-child :
select the last child of element that has class="foo"
.foo:nth-child(n) :
select the nth child of element that has class="foo"
.foo:nth-child(odd) :
select the nth child(where n is odd number) of element that has class="foo"
.foo:nth-child(even) :
select the nth child(where n is even number) of element that has class="foo"
.foo:nth-child(3n+1) :
select the first child of element that has class="foo" and select every 3rd children from there
2n(every second)
2n+1 (every third from 1) */
.foo:nth-child(2n+1) {
color: red;
}
/* .foo:nth-child(3n+1) {
color: red;
} */
</style>
</head>
<body>
<ul>
<li class="foo">1</li> <!-- .foo:first-child -->
<li class="foo">2</li>
<li class="foo">3</li> <!-- .foo:nth-child(3) -->
<li class="foo">4</li>
<li class="foo">5</li> <!-- .foo:last-child -->
<li class="foo">6</li>
<li class="foo">7</li>
<li class="foo">8</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상요소 선택자</title>
<style>
/*
::after creates a pseudo(가상)-element that is the last child of the selected element.
It is often used to add cosmetic content to an element with the content property.
It is inline by default. */
/* These are pseudo elements so cannot be selected when you try to drag on the browser */
/* do not include important data or info in pseudo element, mainly used for styling or something that isn't important */
p::after {
content: 'cm'
}
p::before {
content: '!!'
}
/* after 예시!
실무에서는 주로 이런식으로 장식적인 요소를 html 태그 없이 구현하고 싶을때 사용! */
p::after {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background-image: url(https://e1.pngegg.com/pngimages/635/155/png-clipart-emoji-sticker-three-yellow-stars-illustration-thumbnail.png);
background-size: cover;
}
</style>
</head>
<body>
<p>10</p>
</body>
</html>
Selector priority
id > class > tag
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>selector priority</title>
<style>
/*
id > class > tag
- inline-style : 요소의 안에 속성으로 선언되는 스타일입니다. 1000 점의 가중치를 가집니다.
- id : id 선택자는 100점의 가중치를 가집니다.
- class, 가상클래스 선택자 : class, 가상클래스 선택자는 10점의 가중치를 가집니다.
- 요소, 가상요소 선택자 : 요소, 가상요소 선택자는 1점의 가중치를 가집니다. */
/* DO NOT USE !important. It's a bad practice! */
h1 {
color: red
}
.yellowgreen {
color: yellowgreen
}
#four {
color: skyblue
}
</style>
</head>
<body>
<h1>h1의 첫번째</h1>
<h1 id='two' class='yellowgreen'>h1의 두번째</h1>
<h1 id='three' class='yellowgreen'>h1의 세번째</h1>
<h1 id='four' class='yellowgreen'>h1의 네번째</h1>
</body>
</html>
Shadow DOM
How to check shadow DOM?
- Go to developer's tool
- Click the setting button
- Go to preferences - Elements
- Check on 'Show user agent and shadow DOM'
more about Shadow DOM
Enabled, Disabled
/* The :enabled CSS pseudo-class represents any enabled element.
An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus.
The element also has a disabled state, in which it can't be activated or accept focus. */
input:enabled {
color: blue;
}
input:enabled+span {
color: blue;
}
input:disabled+span {
color: red;
}
label+input:checked+span {
color: green;
}
Not selector
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>not selector</title>
<style>
/* except the class named one */
li:not(.one) {
color: red;
}
</style>
</head>
<body>
<!-- ul>li.one*5 -->
<ul>
<li class="one">hello</li>
<li class="one">hello</li>
<li class="two">hello</li>
<li class="one">hello</li>
<li class="one">hello</li>
</ul>
</body>
</html>
Top comments (0)