전체 선택자
- *로 표현하며, 모든 태그가 선택되어집니다.
<head>
<style>
* {
color : red
}
</style>
</head>
<body>
<h1>Hello</h1> <!-- 선택-->
<p>Hello</p> <!-- 선택-->
</body>태그 선택자
- {태그이름}으로 태그를 선택할 수 있습니다.
- ","로 여러개를 선택할 수 있습니다.
<head>
<style>
h1, h2 {
color : red
}
</style>
</head>
<body>
<h1>Hello</h1> <!-- 선택-->
<h2>Hello</h2> <!-- 선택-->
</body>id 선택자
- #{id_name}으로 태그를 선택할 수 있습니다.
- 각 태그의 id는 html 페이지내의 유일하게 존재하여 한다.
<head>
<style>
#heading {
color : red
}
</style>
</head>
<body>
<h1 id="heading">Hello</h1> <!-- 선택-->
</body>class 선택자
- 하나의 태그 class는 여러개를 가질 수 있습니다.
- class명들은 태그의 class 속성에 명시할 수 있으며 공백을 구분으로 여러 Class를 지정해줄 수 있습니다.
- .{class_name}으로 태그를 선택할 수 있습니다.
- 여러개의 class가 지정된 태그를 선택하고 싶으면 연달아 이어서 써주면 됩니다.
<head>
<style>
.a.b.c {
color : red
}
</style>
</head>
<body>
<h1 class="a b c">Hello</h1> <!-- 선택-->
<h1 class ="a b">Wolrd!</h1> <!-- 선택되지 않습니다 -->
</body>후손 선택자
- 후손 : 자신의 아래의 모든 태그를 의미
- {tag_name} {tag_name}, 태그 사이의 공백을 구분자로 태그를 선택할 수 있습니다.
<head>
<style>
body li {
color : red
}
</style>
</head>
<body>
<ul>
<li>A</li> <!-- 선택-->
<li>B</li> <!-- 선택-->
<li>C</li> <!-- 선택-->
</ul>
</body>자손 선택자
-
자손 : 자신의 아래의 태그를 의미, 손자는 미포함 (depth가 1까지만)
-
{tag_name} > {tag_name} 태그 사이의 ">" 꺽쇄를 사용하여 태그를 선택할 수 있습니다.
<head>
<style>
body > li {
color : red
}
body > p {
color : red
}
</style>
</head>
<body>
<p> Hello World </p> <!-- 자손이라 선택-->
<ul>
<li>A</li> <!-- 후손이라 미선택-->
<li>B</li> <!-- 후손이라 미선택-->
<li>C</li> <!-- 후손이라 미선택-->
</ul>
</body>속성 선택자
- {tag_name}[속성="속성 값"]으로 태그를 선택할 수 있습니다. 속성 값은 생략이 가능합니다.
- 태그명도 앞에 서술할 경우, 해당 태그 중에 속성을 가진 태그를 선택할 수 있습니다.
<head>
<style>
h1[title="text"] {
color : red
}
[title] {
color :red
}
</style>
</head>
<body>
<h1 title="text">Hello World</h1> <!-- 선택 -->
</body>
Java, Python, JavaScript Lover