1.전체 선택자
*를 이용해 HTML문서 내의 모든 요소를 선택하는 선택자이다. HTML요소를 포함한 모든 요소가 선택된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
color : orange;
}
</style>
<title>Document</title>
</head>
<body>
<h1>h1 tag</h1>
<p>p tag 1</p>
<p>p tag 2</p>
</body>
</html>
2.태그 선택자
태그명을 이용해 지정된 태그명을 갖는 요소를 선택하는 선택자이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p{
color : orange;
}
</style>
<title>Document</title>
</head>
<body>
<h1>h1 tag</h1>
<p>p tag 1</p>
<p>p tag 2</p>
</body>
</html>
3.ID 선택자
#id속성값을 이용해 지정된 id값을 갖는 요소를 선택하는 선택자이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#p1{
color : orange;
}
</style>
<title>Document</title>
</head>
<body>
<h1>h1 tag</h1>
<p id="p1">p tag 1</p>
<p>p tag 2</p>
</body>
</html>
4.클래스 선택자
.class속성값을 이용해 지정된 class값을 갖는 요소를 선택하는 선택자이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.p1{
color : orange;
}
</style>
<title>Document</title>
</head>
<body>
<h1>h1 tag</h1>
<p class="p1">p tag 1</p>
<p>p tag 2</p>
</body>
</html>
HTML 요소에 클래스 속성값은 공백으로 구분하여 여러개 지정할 수 있다. 미리 스타일을 정의해 둔 뒤 HTML 요소는 이미 정의된 클래스를 지정하는 것으로 필요한 스타일을 지정할 수도 있다.
5.후손 선택자
자신보다 한 레벨 상위의 속하는 요소를 부모요소 한 레벨 하위에 속하는 요소를 자식요소라고 한다. 자신보다 n 레벨 하위에 속하는 요소를 후손 요소라 한다. 후손 선택자는 선택자의 후손요소중 일치하는요소를 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div p{
color : orange;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<h1>h1 tag</h1>
<p class="p1">p tag 1</p>
<span><p>p tag 2</p></span>
</div>
</body>
</html>
6.자식 선택자
자식 선택자는 모든 자식요소중 일치하는 요소를 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div > p{
color : orange;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<h1>h1 tag</h1>
<p class="p1">p tag 1</p>
<span><p>p tag 2</p></span>
</div>
</body>
</html>
7.가상 클래스 선택자
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다
- 마우스가 올라와 있을때
- 방문한 링크나 방문안한 링크
- 포커스 되어있을때
이러한 상태들에는 클래스가 존재하지 않지만 가상 클래스를 임의로 지정하여 선택하는 방법이다. 가상클래스는 마침표 대신 콜론을 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* a 요소가 방문하지 않은 링크일 때 */
a:link { color: orange; }
/* a 요소가 방문한 링크일 때 */
a:visited { color: green; }
/* a 요소에 마우스가 올라와 있을 때 */
a:hover { font-weight: bold; }
/* a 요소가 클릭된 상태일 때 */
a:active { color: blue; }
input:focus{
color : red;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<a href="#">LINK</a>
<input type="text">
</div>
</body>
</html>8.UI 요소 상태 선택자
- :checked -> 선택자가 체크 상태일때
- :enabled -> 선택자가 사용 가능한 상태일때
- :disabled -> 선택자가 사용 불가능한 상태일때
9.구종 가상 클래스 선택자
- :nth-child(n) -> 선택자에 해당되는 요소중 앞에서 n번째 자식요소를 선택한다.
- :nth-last-child(n) -> 선택자에 해당되는 요소중 뒤에서 n번째 자식요소를 선택한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ol > li:nth-child(2){
color : blue;
}
</style>
<title>Document</title>
</head>
<body>
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
