CSS의 선택자의 종류
- 기본 선택자
- 복합 선택자
- 가상 클래스 선택자
- 가상 요소 선택자
- 속성 선택자
기본 선택자
기본 선택자는 HTML 문서에서 모든 요소를 선택하는 데 사용되는 선택자입니다. HTML 요소를 전체적으로 스타일링할 때 사용됩니다.
- 전체 선택자( * ): 문서 내의 모든 요소를 선택합니다.
* {
color: black; /* 스타일 규칙 */
}- 태그 선택자: 특정 HTML 요소를 선택합니다.
li {
color: black; /* <li> 요소에 대한 스타일 규칙 */
}- 클래스 선택자( . ): 특정 클래스를 가진 요소를 선택합니다.
.example {
color: black; /* 클래스가 "example"인 요소에 대한 스타일 규칙 */
}- 아이디 선택자( # ): 특정 아이디를 가진 요소를 선택합니다.
#header {
color: black; /* 아이디가 "header"인 요소에 대한 스타일 규칙 */
}복합 선택자
CSS 복합 선택자는 여러 선택자를 결합하여 특정 요소를 더 정확하게 선택하는 데 사용됩니다. 다양한 복합 선택자를 사용하여 더 특정한 규칙을 적용할 수 있습니다.
- 일치 선택자: 두 가지 선택자를 동시에 만족하는 요소를 선택합니다.
span.orange {
color: black; /* 태그가 span이면서 클래스가 "orange"인 요소에 대한 스타일 규칙 */
}<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li>
</ul>
</div>
<div>당근</div>
<div>토마토</div>
<span class="orange"></span> <!-- 선택 -->- 자식 선택자( > ): 한 요소의 직계 자식을 선택합니다.
ul > .orange {
color: black; /* ul의 자식요소중 클래스가 "orange"인 요소에 대한 스타일 규칙 */
}<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li> <!-- 선택 -->
</ul>
</div>
<div>당근</div>
<div>토마토</div>
<span class="orange"></span>- 하위(후손) 선택자(띄어쓰기): 한 요소의 하위 모든 자손을 선택합니다.
div .orange {
color: black; /* div 안의 모든 클래스가 "orange"인 요소에 대한 스타일 규칙 */
}<div>
<ul>
<li>사과</li>
<li>딸기</li>
<li class="orange">오렌지</li> <!-- 선택 -->
</ul>
</div>
<div>당근</div>
<div>토마토</div>
<span class="orange"></span> <!-- 선택 -->- 인접 형제 선택자( + ): 특정 요소의 바로 다음 형제 요소를 선택합니다.
.orange + li {
color: black; /* 클래스가 "orange"인 요소 다음에 나오는 li 요소에 대한 스타일 규칙 */
}<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li> <!-- 선택 -->
<li>사과</li>
</ul>- 일반 형제 선택자( ~ ): 특정 요소 이후의 모든 형제 요소를 선택합니다.
.orange ~ li {
color: black; /* 클래스가 "orange"인 요소 다음에 나오는 모든 형제 li 요소에 대한 스타일 규칙 */
}<ul>
<li>딸기</li>
<li>수박</li>
<li class="orange">오렌지</li>
<li>망고</li> <!-- 선택 -->
<li>사과</li> <!-- 선택 -->
</ul>가상 클래스
가상 클래스 선택자는 HTML 문서의 특정 상태나 구조를 나타내는데 사용되는 CSS 선택자입니다. 가상 클래스는 일반적으로 콜론(:)으로 시작하며, 특정한 조건이나 상태에 해당하는 요소를 선택할 때 사용됩니다.
- :hover: 마우스가 요소 의에 올라가 있는 동안에 선택 됩니다.
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background: yellowgreen;
/* box가 변할 때 1초동안 애니메이션을 넣어줌 */
transition: 1s;
}
.box:hover {
/* 마우스가 링크 위에 있을 때의 스타일 규칙 */
width: 200px;
background: green;
}
}- :active: 사용자가 마우스로 클릭하고 있는 동안에 선택됩니다.
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background: yellowgreen;
transition: 0.5s;
}
.box:active {
/* 버튼이 클릭되고 있는 동안의 스타일 규칙 */
width: 200px;
background: royalblue;
}- :focus: 요소가 포커스를 받은 상태일 때 선택됩니다. 주로 입력 필드에 사용됩니다. 대화형 콘텐츠(input, a, img, botton, label)에서 사용이 가능합니다.
<input type="text">
input {
}
input:focus {
background-color: blueviolet;
}<div>요소는 기본적으로 :focus를 받을 수 있는 요소가 아니지만 tabindex속성을 추가하면 <div>요소에도 :focus를 줄 수 있습니다.
<div class="box" tabindex="-1"></div>
.box {
width: 100px;
height: 100px;
background: yellowgreen;
transition: 0.2s;
}
.box:focus {
width: 200px;
background: royalblue;
}- :first-child: 부모 요소 내에서 첫 번째 자식 요소를 선택합니다.
.fruits div:first-child {
color: red; /* 클래스가 "fruits"인 요소 내부의 첫 번째 div 요소에 대한 스타일 규칙 */
}<!-- div가 .fruits의 첫 번째 자식요소가 아닐 경우 규칙이 적용되지 않습니다. -->
<div class="fruits">
<div>사과</div> <!-- 선택 -->
<div>키위</div>
<span>참외</span>
<p>자몽</p>
<h3>포도</h3>
</div>- :last-child: 부모 요소 내에서 마지막 자식 요소를 선택합니다.
.fruits h3:first-child {
color: red; /* 클래스가 "fruits"인 요소 내부의 마지막 h3 요소에 대한 스타일 규칙 */
}<!-- h3가 .fruits의 마지막 자식요소가 아닐 경우 규칙이 적용되지 않습니다. -->
<div class="fruits">
<div>사과</div>
<div>키위</div>
<span>참외</span>
<p>자몽</p>
<h3>포도</h3> <!-- 선택 -->
</div>- :nth-child(n): 부모 요소의 자식 중에서 n번째에 해당하는 요소를 선택합니다.
.fruits *:nth-child(2) {
color: red;
/* 클래스가 "fruits"인 요소 내부의 모든 자식 요소 중 두 번째 자식 요소에 대한 스타일을 정의 */
}<div class="fruits">
<div>사과</div>
<div>키위</div> <!-- 선택 -->
<span>참외</span>
<p>자몽</p>
<h3>포도</h3>
</div>- :nth-child(2n): 2의 배수를 가진 인덱스를 가진 자식 요소를 선택하는 가상 클래스 선택자입니다.
.fruits li:nth-child(2n) {
color: red;
}<ul class="fruits">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
- :nth-child(3n + 1): 3의 배수에 1을 더한 인덱스를 가진 자식 요소를 선택합니다.(1, 4, 7, 10, 13, ...)
.fruits li:nth-child(3n + 1) {
color: red;
}
- :nth-child(even): 해당 요소의 짝수 번째에 위치한 요소를 선택합니다
.fruits li:nth-child(even) {
color: red;
}
- :nth-child(odd): 해당 요소의 홀수 번째에 위치한 요소를 선택합니다
.fruits li:nth-child(odd) {
color: red;
}
- :nth-child(n + 3): 3번째 자식부터 시작하는 모든 자식 요소를 선택합니다.
.fruits li:nth-child(n + 3) {
color: red;
}
/* 결과적으로 "Item 3", "Item 4", "Item 5"에 텍스트가 적용됩니다. */ 
- 부정 선택자( :not() ): 특정 요소나 요소의 집합을 제외하고 선택하는 데 사용됩니다. 이를 통해 스타일을 적용하거나 규칙을 적용할 때, 특정 조건을 제외하고자 할 때 유용합니다. (많이 사용되지는 않습니다.)
.fruits *:not(span) {
color: red;
}
/* 클래스가 "fruits"인 요소 내부의 모든 자식 중 span을 제외하고 나머지 자식 요소에 대한 스타일을 정의 */<div class="fruits">
<div>사과</div>
<div>키위</div>
<span>참외</span>
<p>자몽</p>
<h3>포도</h3>
</div>가상 요소 선택자
가상 요소 선택자는 문서의 특정 부분에 스타일을 적용하는 데 사용됩니다. 가상 요소는 HTML 문서에 실제로 존재하지 않는 요소를 대상으로 하며, 콘텐츠의 일부분이 아니라 특정 상태나 위치에 스타일을 적용하는 데 사용됩니다.
- ::before: 선택한 요소의 앞부분에 새로운 요소를 생성하는 데 사용됩니다.
ul li::before {
content: "item";
color: red;
}
/* ul 요소 안에 있는 li 요소의 내용 앞부분에 content를 추가하고 스타일을 정의 */<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
- ::after: 선택한 요소의 뒷부분에 새로운 요소를 생성하는 데 사용됩니다.
ul li::after {
content: "item";
color: red;
}
/* ul 요소 안에 있는 li 요소의 내용 뒷부분에 content를 추가하고 스타일을 정의 */<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
속성 선택자
속성 선택자는 특정한 조건을 만족하는 요소에 대해 스타일을 적용하는 데 유용합니다. 각 예시 코드에서 [...] 안에 있는 부분이 속성 선택자의 형태이며, 그 뒤에 중괄호 {} 안에 스타일 규칙이 옵니다.
- 속성 존재 선택자
a[href] {
color: red; /* a 태그중에서 href 속성을 가진 모든 링크에 스타일 적용 */
text-decoration: underline;
}<a href="https://www.google.co.kr/">Google</a>
<a href="https://www.naver.com/">Naver</a>
- 특정 값이 있는 속성 선택자
[type="text"] {
color: red; /* type 속성 값이 "text"인 모든 요소에 스타일 적용 */
}<input type="text" value="Hello"> <!-- 선택 -->
<input type="password" value="12345">
- 특정 값으로 시작하는 속성 선택자
[class^="btn-"] {
color: red;
border: 2px solid blue;
/* class 속성 값이 "btn-"로 시작하는 모든 요소에 스타일 적용 */
}<button class="btn-first">FIRST</button> <!-- 선택 -->
<button class="btn-second">SECOND</button> <!-- 선택 -->
<button>Normal</button>
- 특정 값으로 끝나는 속성 선택자
[class$="first"] {
color: red;
border: 2px solid blue;
/* class 속성 값이 "first"로 끝나는 모든 요소에 스타일 적용 */
}<button class="btn-first">FIRST</button> <!-- 선택 -->
<button class="btn-second">SECOND</button>
<button>Normal</button>
선택자 우선순위
선택자 우선순위는 스타일 규칙이 적용되는 우선 순위를 나타냅니다. 스타일 규칙이 충돌할 때, 브라우저는 이 우선순위를 기반으로 어떤 스타일을 적용할지 결정합니다. 같은 요소가 여러 선언의 대상이 된 경우, 우선순위가 높은 선택자가 적용됩니다.
- (권장되지 않습니다) !important : 99999점
- 스타일 규칙에 우선순위를 강제로 적용하는데 사용되는 CSS 선언입니다.
-!important를 사용하면 해당 스타일 규칙이 다른 스타일을 덮어 씌우기 때문에 다른 스타일을 적용하기 어려워집니다.
- 코드가 커질수록!important를 많이 사용하면 유지보수가 어려워집니다.
- 일반적으로!important는 특별한 상황에서만 사용해야 하며, 최대한 피하는 것이 좋습니다.
p {
color: black !important;
}- (권장되지 않습니다) 인라인 스타일 (Inline Styles) : 1000점
- 유지보수의 어려움: 인라인 스타일은 HTML 요소에 직접 스타일을 적용하는 방식이기 때문에 코드가 길고 복잡해지며 유지보수가 어려워질 수 있습니다. 스타일을 변경해야 할 경우 여러 요소를 일일이 수정해야 하므로 효율성이 떨어집니다.
- 선택자 우선순위와 충돌: 인라인 스타일은 다른 스타일 규칙보다 높은 우선순위를 가지기 때문에 외부 스타일 시트에 있는 스타일을 무시하고 적용될 수 있습니다.
<div style="color: red;">- 아이디 선택자( # ) : 100점
#example {
color: black;
}- 클래스 선택자( . ) 및 속성 선택자( [...] ) : 10점
.example {
color: black;
}
a[href] {
color: red;
}- 태그 선택자 : 1점
li {
color: black;
}- 전체 선택자( * ) : 0점
* {
color: black;
}- 부정 선택자( :not( ) ) : 0점
:not(p) {
color: black;
}우선순위 점수 계산
.list li.item { color: black; } /* 21점 */- list 클래스의 하위 요소인 li중 클래스 이름이 item인 요소
- 클래스(10점) + 태그(1점) + 클래스(10점) = 21점
.list li:hover { color: black; } /* 21점 */- list 클래스의 하위 요소인 li에 가상 클래스 hover를 부여한 요소
- 클래스(10점) + 태그(1점) + 가상 클래스(10점) = 21점
.box::before { color: black; } /* 11점 */- box 클래스에 가상 요소 before를 가리킵니다.
- 클래스(10점) + 태그(1점) = 11점
#example span { color: black; } /* 101점 */- id가 example인 요소의 하위 요소 중 span 태그를 가리킵니다.
- 아이디(100점) + 태그(1점) = 101점
header .menu li:nth-child(2) { color: black; } /* 22점 */- header 태그의 하위 요소이면서, menu 클래스의 하위 요소 중 li 태그의 가상 클래스 nth-child를 가리킵니다
- 클래스(10점) + 태그(1점) + 클래스(10점) + 태그(1점) = 22점
:not(.box) { color: black; } /* 10점 */- 부정 선택자는 점수로 계산하지 않습니다.
- 부정 + 클래스(10점) = 10점
<body>
<div class="hello">Hello</div>
</body>.hello { /* 10점 */
color: green;
}
.hello { /* 10점 */
color: red; /* 선택 */
}- 동일한 우선순위를 가진 경우 마지막으로 선언된 선택자가 적용됩니다.
<body>
<div class="hello">Hello</div>
</body>div.hello { /* 11점 */
color: red; /* 선택 */
}
.hello { /* 10점 */
color: green;
}- 마지막에 선언되었더라도 우선순위가 높은 경우, 높은 우선순위의 선택자가 적용됩니다.
참고
내가 바뀌지 않으면 아무것도 바뀌지 않는다 🔥🔥🔥