선택자란?
RuleSet의 요소 중 가장 앞단, { (왼쪽중괄호) 이전에 있는 요소
HTML의 특정 요소를 선택하여 스타일을 적용할 떄 사용
선택자는 HTML페이지 내부 특정 요소를 선택하여 선언블록 내용 적용
1.모든(전체)선택자
[표현법]
* {
스타일속성 = "값";
스타일속성 = "값";
}
=> 모든 요소들을 다 선택하고자 할 때 사용
2.태그선택자
[표현법]
태그명 {
스타일 속성 : 값 ;
스타일 속성 : 값 ;
}
==>현재 이 문서 내에 같은 태그들을 모두 선택할 때 사용
3.아이디선택자 (#아이디명)
[표현법]
#아이디명 {
스타일 속성 : 값;
스타일 속성 : 값;
}
=> 해당 문서 내에서 특정 HTML요소 하나만을 선택하고자 할 때 사용
단, 해당요소에 ID속성을 이용하여 고유한 아이디값이 부여되어있어야 함
같은태그이더라도 부분적으로 다르게 스타일 부여시 사용하면 좋음
4. 클래스선택자(.클래스명)
[표현법]
.클래스명{
스타일 속성 : 값;
스타일 속성: 값;
....
}
==> 이 문서안에서 여러개 요소를 선택하고 싶을 떄
id, class : 모든태그에 공통적으로 사용가능한 속성
id : 문서 내에 고유한 값으로 작성 (중복금지!)
class : 별명을 지어주는 속성, 여러개 작성 가능, 중복값 작성 가능
5. 속성선택자
스타일을 부여하고자 하는 요소 내에 작성되에 있는 속성을 이용해서 선택하는 방법
기본선택자 뒤에 []를 이용하여 속성과 속성값을 제시하여 선택하는 방법
[표현법]
선택자[속성=속성값]{스타일속성; 값; ....} 일치
선택자[속성~=속성값]{스타일속성; 값; ....} 포함
선택자[속성|=속성값]{스타일속성; 값; ....} 클래스시작(단어기준, -로 구분)
선택자[속성^=속성값]{스타일속성; 값; ....} name시작(단어기준)
선택자[속성$=속성값]{스타일속성; 값; ....} 끝
선택자[속성*=속성값]{스타일속성; 값; ....} 포함(일반문자열) <ul>
<li class="class1">클래스선택자1</li>
<li class="test">클래스선택자2</li>
<li class="class1 test">클래스선택자3</li>
<!-- 클래스를 여러개 작성하려면 " " 내부에 클래스명을 연달아 -->
<li>클래스선택자4</li>
<li class="class1">클래스선택자5</li>
</ul> <div class="div-class" name="name1">div1</div>
<div class="div-class" name="name2">div2</div>
<div class="div-class" name="name3 name1">div3</div>
<div class="di-class" name="name4">div4</div>
/* div요소중 name속성 값이 name1과 "일치"하는 요소에만 스타일 부여*/
div[name=name1]{
background-color: darkblue;
}
/* div요소 중 name속성 값에 name1이 "포함"되어있는 요소만 스타일 부여 */
div[name~=name1]{
background: orange;
}
/* name 은 단어기준, class는 그냥 문자 하나만 포함되어잇어도 됨
한 단어의 기준은 "-"!*/
/* div요소 중에서 class속성값에 i가 포함되어있는 요소만 스타일 부여 */
div[class*=i]{
color: aliceblue;
background-color: brown;
}
/* div 요소중에서 class속성값이 div로 "시작"하는 요소만 스타일 부여 */
div[class|= div]{
color: chartreuse;
}
/* div요소중에서 name속성값이 name3으로 "시작"하는 요소만 스타일 부여 */
div[name^=name3]{
background-color: lightcoral;
}
/* div요소중에서 class속성값이 ss로 끝나는 요소만 스타일 부여 */
div[class$=ss]{
background-color: chartreuse;
}
/* class속성값이 div-class인 요소중에서도 name속성값이
name3이 "포함"되어있는 요소 */
.div-class[name~=name3]{
color: aliceblue;
}6. 자식선택자 후손선택자
자식요소 : 바로 하위에 있는 요소들
[표현법]
- 자손선택자 (>)
a > b {
스타일속성 : 값;
}
- 후손선택자 ( )
a b {
스타일속성 : 값;
}
/* id속성값이 test1 요소의 자손인 ul의 자손 li */
#test1>ul>li{
background-color: aqua;
}
/* 후손선택자 a b: a요소의 후손 중에서 b요소들만 선택 */
#test1 li {
color :darksalmon;
background-color: brown;
/* 우선순위에 밀려 적용되지 않음, 후손선택자보다 자손선택자가 우선순위 높음 */
}7. 동위(같은레벨)선택자
동위관계(같은레벨)이 있는 특정 요소 선택시 사용
[표현법]
- a요소 바로뒤!!에 있는 b요소 단 하나만을 선택
a+b {
스타일속성 : 값
...
}
- a요소 뒤에 있는 b요소를 모두다 선택
a~b {
스타일속성 : 값;
...
}
/* id가 test2인 요소 뒤에 있는 div요소 하나만(바로뒤) 선택 */
#test2+div{
background-color: forestgreen;
}
/* id가 test2인 요소 뒤에 있는 ul요소 하나만 선택 */
#test2+ul{
background-color: blueviolet;
}
/* id가 test2인 요소 뒤에있는 모든 ul요소 선택 */
#test2~ul{
background-color: gold;
}
8. 반응선택자
사용자의 움직임에 따라 선택 되거나 안되는 선택자
[표현법]
- 해당요소 클릭시 스타일 부여하는 방법
선택자: active {
스타일 속성 : 값;
.....
}
- 해당 요소에 마우스가 올라가는 순간 스타일 부여
선택자: hover{
스타일속성 : 값;
}
<div id="active-test" class="area">active테스트</div>
<br>
<div id="hover-test" class="area">hover테스트</div>.area{
width : 100px;
height: 100px;
background-color: aqua;
}
#active-test:active {
color: coral;
background-color: lemonchiffon;
cursor: pointer;
}
/* active속성: 클릭하면 바뀜! */
#hover-test:hover{
color:aliceblue;
background-color: chocolate;
cursor: pointer
}
/* hover속성: 커서가 해당영역에 올라가는 순간 바뀜! */
9.상태선택자
요소의 상태에 따라서 선택되는 선택자
1. checked 상태
2. focus 상태
3. enabled 상태
4. disabled상태
[표현법]
1) checked 상태 요소들
선택자: checked{
스타일 속성 :값
.....
}
2)foucus가 맞춰진 input요소 선택
선택자: focus{
스타일속성 : 값;
...
}
3) enabled: 칸이 활성화되어있는 상태선택자
선택자:enabled{
스타일 속성 : 값 ;
}
4) disabled: 칸이 비활성호되어있는 상태
선택자: disabled{
스타일 속성 : 값;
}- checked
/* type = checkedbox 인것들 선택하기
-->화면에서 checkbox가 "체크"로바뀔 때 스타일이 바뀜 */
input[type="checkbox"]:checked{
width: 20px;
height: 20px;
} <!--(input[type=checkbox]+label)*3 -->
<input type="checkbox" checked><label for="banana">바나나</label>
<input type="checkbox"><label for="watermelon">수박</label>
<input type="checkbox"><label for="mango">망고</label>
- focus
/* focus, 해당 박스에 커서가 갈 때 박스의 색깔을 바꾸고 싶다면 */
input[name^=user]:focus{
background-color: burlywood;
} 아이디: <input type="text" name="userId" placeholder="아이디를 기입하세요">
<br>
비밀번호: <input type="password" name="userPwd" placeholder="비밀번호를 입력하세요">
<br>
<button>클릭가능</button>
<button disabled>클릭불가능</button>
- enabled/disabled
<button>클릭가능</button>
<button disabled>클릭불가능</button>button:enabled{
background-color: indianred;
}
button:disabled{
background-color: lightseagreen;
}
선택자 우선순위
| 순위 | 선언방식 | 설명 | 예시 |
| 1 | !important | 우선순위 최상위 명령어. 속성값 바로 뒤에 넣는다. |
p { color: red !important; } |
| 2 | inline style | html 문서에서 tag 내에 style을 정의한 것 | <p style="color: red"> |
| 3 | id Selector | tag 내에 id를 정의한 후, #id 으로 선택 | <p id="title">제목</p> #title { color: red; } |
| 4 | class Selector | tag 내에 class를 정의한 후, .class 으로 선택 | <p class="subtitle">부제목</p> .subtitle { color: red; } |
| 5 | tag Selector | tag 요소를 선택자로 사용 | p { color: red; } |
| 6 | universal Selector | asterisk(*)로 요소 전체를 선택 | * { color: red; } |
| !important | 우선순위 1위 |
| id 선택자 vs class 선택자 | id 선택자 우선 |
| class 선택자 vs 요소 선택자 | class 선택자 우선 |
| 요소 선택자 vs 전체 선택자 | 요소 선택자 우선 |
| class 선택자 vs 특정 요소의 class 선택자 | 특정 태그의 class 우선 ex) .title vs h1.title : h1.title가 더 구체적임 |
| 같은 class 선택자에 대한 css | 순서상 나중이 우선 |
| 같은 요소 선택자에 대한 css | 순서상 나중이 우선 |
Reference
'HTML' 카테고리의 다른 글
| [HTML] 하이퍼링크 관련 태그 (수정필요) (0) | 2022.10.19 |
|---|---|
| [HTML]블럭요소와 인라인요소, div/ span / iframe (0) | 2022.10.19 |
| [HTML] form태그 / input태그 및 타입 (0) | 2022.10.19 |
| [HTML] 이미지 / 미디어 관련 태그 (img / audio /video) (0) | 2022.10.19 |
| [HTML] table관련 태그 (0) | 2022.10.19 |
