Type, Class, ID
Type Selector
-
전체 웹페이지에서 일관적으로 적용해야 하는 스타일이 있을 때 사용
-
보통 상단에 작성함
/* Type Selector */ h2 { color: purple; } h3 { color: red; }
ID Selector
- 이름표같은 개념
- 유일해야함
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">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h1 id="welcome-title">Wlecome!</h1>
<h2>List1</h2>
<ul>
<li class="blue red">Toy Story</li>
<li class="red">Zootopia</li>
<li class="blue">Inside Out</li>
</ul>
<h2>List2</h2>
<ol>
<li>first</li>
<li>second</li>
</ol>
<h3>Lorem Ipsum</h3>
<p class="blue">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dolores iusto ab repellendus odit omnis, sequi optio magnam porro aspernatur perferendis, tempora quaerat tempore sint nesciunt ut quam quas nihil?</p>
<p>Saepe officia qui</p>
<p>Eligendi, temporibus!</p>
</body>
</html>
/* Type Selector */
h2 {
color: purple;
}
/* ID Selector */
#welcome-title {
color: green;
}
/* Class Selector */
.blue {
color: blue;
}
.red {
color: red;
}
Attribute Selector
[attr]
a[target] {
color: hotpink;
}[attr=value]
a[href="https://example.org"] {
color: indigo;
}
input[type = "submit"] {
background-color: green;
}[attr^=value] value로 시작하는 값을 찾아 설정
a[href^="http://"] {
color: red;
}[attr$=value] value로 끝나는 값을 찾아 설정
a[href$=".com"] {
color: silver;
}[attr*=value] value가 포함된 전체를 찾아 설정
a[href*="example"] {
color: sienna;
}first-child, last-child, nth-child
