선택자 종류
1. 태그명
- 선택자에 명시된 태그명과 일치하는 모든 요소를 선택
|
구문
|
태그명{css속성: 값;}
|
|
|
예
|
input{color: blue;}
|
|
2. 아이디(id)
- 선택자에 명시된 아이디명과 html요소의 아이디 속성의 값과 일치하는 요소 선택
- html 요소의 아이디 속성값은 유일값을 가져야 한다.
- 모든 html 요소는 id 속성을 가질 수 있다.
|
구문
|
#아이디명{css속성:값;}
|
|
|
예
|
#my-div{color:blue;}
|
|
 |
||
3. 클래스(class)
- 선택자에 명시된 클래스명과 html 요소의 클래스 값이 같은 모든 대상을 선택
- html 요소의 클래스 속성에 여러개의 클래스값 지정 가능
- 클래스는 html 요소들을 그룹핑할 때 쓰인다.
- 모든 html요소는 클래스 속성을 가질 수 있다.
|
구문
|
.클래스명{css속성:값;}
|
|
|
예
|
.my-class{color: red;}
|
|
|
 |
||
4. 속성명, 속성명과 속성값
- 선택자에 명시된 속성명 혹은 속성명과 속성값과
html 요소의 속성명 혹은 속성명과 속성값이 같은 모든 대상을 선택하여 style적용
|
구문
|
[속성명]{css속성:값;} or [속성명=속성값]{css속성:값;}
|
|
|
예
|
[type]{color: blue;} or [type=text]{color:blue;}
|
|
|
 |
||
선택자 복합활용
1. 상하관계 표현
- html 요소의 상하관계를 표현하는 방식으로 html 요소 선택
- 선택자를 공백과 함게 열거 하여 상화관계 표현
ex) #my-group .text-red {color: blue;}
-> html 요소 중 아이디 속성에 my-group값을 가진 대상의 하위 요소 class의 속성 text-red값을 포함한 대상 선택하여 텍스트요소 파랑으로 적용
2. and 조건
- 선택자를 공백없이 붙여서 쓸 경우 모든 조건에 해당되는 html 요소 선택
ex) #my-group.my-text{color:red;}
-> html 요소 중 아이디 속성 값이 my-group이며, 클래스 속성값이 my-text값을 포함하고 있는 대상을 선택하여 텍스트 요소 색상 빨강으로 적용
3. or 조건
- 선택자를 쉼표를 붙여서 열거 할 경우 열거된 모든 html 요소를 선택
ex) .user-group, .user-list{color: red;}
-> html 요소 중 클래스 속성 값 user-grop과 user-list를 포함하고 있는 대상을 선택하여 텍스트 요소 색상 빨강으로 적용
<html>
<head>
<style>
.bbs-list {
padding: 0;
}
.bbs-list li {/* 상하관계 */
color: #999;
font-size: 13px;
}
.bbs-list li.notice { /* 상하관계+ and조건 */
font-weight: bold;
}
/* 상하관계 + and조건 + or조건 */
#notice .bbs-list li.notice, #free .bbs-list li.notice{color:red;}
</style>
</head>
<body>
<div id="notice">
<ul class="bbs-list">
<li class="notice">공지사항1</li>
<li>공지사항2</li>
<li>공지사항3</li>
</ul>
</div>
<div id="free">
<ul class="bbs-list">
<li class="notice">자유게시물 제목1</li>
<li>자유게시물 제목2</li>
<li>자유게시물 제목3</li>
</ul>
</div>
</body>
</html>
'{ "Hello World!" }; > HTML／CSS' 카테고리의 다른 글
| (CSS)속성 종류와 가상선택자 (0) | 2021.12.13 |
|---|---|
| (CSS) CSS/STYLE 적용방법 (0) | 2021.12.12 |
| (HTML) form 요소 (0) | 2021.12.12 |
| (HTML) 블럭요소, 인라인요소 (0) | 2021.12.12 |
| (HTML) HTML의 기본 구조와 절대/상대 경로 (0) | 2021.12.12 |