선택자 종류

id 선택자 ★ : (예) #hz {color:red;}
class 선택자 ★ : (예) .hz {color:red;}
전체선택자 (=공통선택자) : (예) * {color:red;}
요소선택자 (=태그선택자) : (예) p {color:red;}
자손선택자 (=후손선택자) : (예) p span {color:red;}
자식선택자 : (예) p>span {color:red;}
인접선택자 : (예) h1 + p {color: red;}
속성선택자 : (예) a[href] {color:red;} 그외 다양.
링크선택자 : (예) a:hover {color:red;}
가상선택자 : (예) a::before {color:red;} 그외 다양.

class 선택자

css-1

.class

.jhy 경우, class = “jhy” 속성 갖는 모든 요소 선택.

.class1.class2

.jhy1.jhy2 경우, jhy1 jhy2 두 클래스를 모두 갖는 요소 선택.

.class1 .class2

.jhy1 .jhy2 경우, 클래스 jhy1을 가진 요소의 자손 중 jhy2를 갖는 모든 요소 선택.

css-2

.spacious {
    margin: 2em;
}

모든 태그속성에 spacious의 이름을 갖는 클래스는 모두 적용
- <div class="elegant retro spacious"/>
- <li class="elegant retro spacious"/>

css-3

li.spacious.elegant {
    margin: 2em;
}

li 태그속성에 elegant와 spacious의 이름을 갖는 클래스는 모두 적용
- <li class="elegant retro spacious"/>

css-4

.red {
    color: #f33;
}

.yellow-bg {
    background: #ffa;
}

.fancy {
    font-weight: bold;
    text-shadow: 4px 4px 3px #77f;
}

<p class="red">빨간 글자색의 문단입니다.</p>
<p class="red yellow-bg">빨간 글자색과 노란 배경의 문단입니다.</p>
<p class="red fancy">빨간 글자색과 "멋진" 스타일을 가진 문단입니다.</p>
<p>이건 그냥 문단이에요.</p>

형제선택자

h1 + h2 {
    color: red;
}

<h1> 태그 바로 뒤에 있는 <h2> 태그 1개만 색을 빨강으로 변경

h1 ~ h2 {
    color: red;
}

<h1> 태그 뒤에 있는 모든 <h2> 태그의 색을 빨강으로 변경

참조
[1] https://developer.mozilla.org/ko/docs/Web/CSS/Class_selectors#%EA%B2%B0%EA%B3%BC
[2] https://homzzang.com/b/css-4
[3] https://dasima.xyz/css-%ED%98%95%EC%A0%9C-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%A2%85%EB%A5%98-%EA%B8%B0%ED%98%B8-%EC%A0%95%EB%A6%AC/

이 문서는 jhy156456에 의해 작성되었습니다.
마지막 수정 날짜:2023-03-11 01:06:42

[css] 선택자 정리