● 기본 선택자
태그 선택자 : tag
클래스 선택자 : .class
ID 선택자 : #id
<style>
tag {
color : red;
}
.class {
color : red;
}
#id {
color : red;
}
span#id {
color : red;
}
div.class {
color : green;
}
</style>
●그룹선택자( , ) - 여러개 선택
<style>
h1, .class, #id {
color : red;
}
</style>
● 후손선택자(공백) : 아래의 모든 하위요소 선택
<html>
<head>
<style>
#hello span { /* #hello 아래에 존재하는 모든 span */
color : red;
}
</style>
</head>
<body>
<div id="hello">
<div>
<span> span tag1 </span>
</div>
<span> span tag2 </span>
</div>
</body>
</html>→span tag1, tag2 선택
● 자식선택자( > ) : 바로 아래의 하위요소 선택
<html>
<head>
<style>
#hello > span { /* 오직 #hello 바로 아래에 위치한 span */
color : red;
}
</style>
</head>
<body>
<div id="hello">
<div>
<span> span tag1 </span>
</div>
<span> span tag2 </span>
</div>
</body>
</html>→span tag2만 선택
● 구조 선택자
- n번째 자식선택 (nth-child)
<html>
<head>
<style>
#hello > p:nth-child(2) {
color : red;
}
</style>
</head>
<body>
<div id="hello">
<p>1번째 단락입니다.</p>
<p>2번째 단락입니다.</p>
<p>3번째 단락입니다.</p>
<p>4번째 단락입니다.</p>
</div>
</body>
</html>→2번째 p태그 선택
● 속성 선택자 [ ] : 태그의 속성선택
<html>
<head>
<style>
input[type='text'] {
color : red;
}
input[type='password'] {
color : blue;
}
</style>
</head>
<body>
<form>
<input type='text'>
<input type='password'>
</form>
</body>
</html>
● 반응 선택자
- :active : 마우스 클릭
- :hover : 커서를 올린 상태
<style>
h1:hover {
color : red;
}
h1:active {
color : blue;
}
</style>
<body>
<h1>반응 선택자</h1>
</body>
● 상태 선택자
- :checked : 체크 상태의 태그 선택
- :focus : 포커스를 맞춘 태그 선택
- :enabled : 사용 가능한 태그 선택
- :disnabled : 사용 불가능한 태그 선택
<style>
/* input 태그가 사용 가능할 경우 */
input:enabled { background-color: white; }
/* input 태그가 사용 불가능할 경우 */
input:disabled { background-color: gray; }
/* input 태그에 초점이 맞추어진 경우*/
input:focus { background-color: orange; }
</style>'Web > CSS' 카테고리의 다른 글
| CSS 글자 속성(font, text) (0) | 2020.07.13 |
|---|---|
| CSS 가시 속성(display) (0) | 2020.07.13 |
| CSS 배경 속성(background) (0) | 2020.07.13 |
| 박스 모델 (0) | 2020.07.13 |
| 리팩토링 (0) | 2020.03.24 |