선택자는 HTML 요소를 특정 조건에 맞게 선택하여 다양한 스타일을 적용 할 수 있게 합니다.
선택자는 크게 5가지로 분류 할 수 있습니다.
1 : 기본 선택자
- 전체 선택자
- 태그 선택자
- 클래스 선택자
- ID 선택자
2 : 속성 선택자
- 속성 선택자
- 부분 속성 선택자
3 : 구조 선택자
- 자식 선택자
- 후손 선택자
- 형제 선택자
4 : 가상 클래스 선택자
- 상태 가상 클래스 선택자
- 구조 가상 클래스 선택자
5 : 가상 요소 선택자
5가지 선택자 모두 알아보고, CSS가 중첩되었을경우 우선순위는 어떻게 될지 알아보겠습니다.
1. 기본 선택자
1.1 : 전체 선택자
전체 선택자는 모든 요소를 선택합니다.
<style>
* {
color:red;
}
</style>
1.2 : 태그 선택자
태그 선택자는 특정 HTML 태그를 선택합니다.
<style>
p {
color: blue;
}
</style>
1.3 : 클래스 선택자
클래스 선택자는 특정 클래스가 지정된 요소를 선택합니다.
클래스 여러개를 적용시키고 싶을 경우 띄어쓰기로 구분하여 작성합니다.
<style>
.span-highlighted {
color: red;
font-weight: bold;
}
.text {
font-size : 40px;
}
</style>
<span class="text highlighted">span태그1</span>
<p class="text">p태그</p>
<span class="text highlighted">span태그2</span>
1.4 : ID 선택자
ID 선택자는 특정 ID가 지정된 요소를 선택합니다. 페이지 내에서 유일해야합니다.
ID 선택자를 여러 요소가 사용할 경우 CSS가 적용될 수는 있지만 문서의 유효성에 문제가 생깁니다. 사용하더라도 유일할 수 있도록 사용합시다.
- CSS 선택자 우선순위에서 class 선택자보다 높은 우선순위를 갖습니다.
- ID 선택자를 남발할경우 어떻게 CSS가 적용될지 예상 하지 못 할 수 있습니다. 헤더나 푸터같은 유일한 요소에 지정해주거나 특별한 요소에 적용하는것 외에는 class 선택자가 권장됩니다.
<style>
#main-header {
background-color: green;
color: black;
height:200px;
font-size : 50px;
}
</style>
<header id="main-header">헤더헤더헤더헤더헤더뚝배기헤더헤더헤더헤더헤더</header>
2 : 속성 선택자
2.1 : 속성 선택자
속성 선택자는 특정 속성이나 속성값에 따라 스타일을 적용합니다. 대괄호안에 속성 또는 속성 값을 지정하여 스타일을 설정합니다.
<style>
/* disabled 속성을 가진 모든 요소 */
[disabled] {
color:brown;
}
[type="text"] {
color:pink;
}
</style>
<button disabled>disabled button</button>
<input type="text" placeholder="텍스트를 입력하세요.">
2.2 : 부분 속성 선택자
속성의 특정 부분을 조건으로 스타일을 설정하는 것도 가능합니다.
^=: 특정 값으로 시작하는 속성 선택
$=: 특정 값으로 끝나는 속성 선택
*=: 특정 값을 포함하는 속성 선택
<style>
/* 클래스 네임이 one으로 시작하는 요소 모두 */
[class ^="one"] {
color: red;
}
/* 클래시 네임이 button으로 끝나는 요소 모두 */
[class $= "button"] {
width:200px;
height:100px
}
/* 클래스 네임이 ree가 포함하는 요소 모두 */
[class *= "ree"] {
color:green;
}
</style>
<button class="one-button">one button</button>
<button class="two-button">two button</button>
<button class="three-button">three button</button>
3 : 구조 선택자
3.1 : 자식 선택자
자식 선택자는 특정 요소의 직계 자식을 선택합니다.
<style>
/* container의 직계자식에만 적용함 */
.container > div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="container">
<!-- container의 직계 자식은 해당 div입니다 -->
<div>
<div>
<!-- 해당 div는 직계자식 div가 아닙니다. -->
</div>
</div>
</div>
3.2 : 후손 선택자
후손 선택자는 특정 요소의 모든 자손을 선택합니다. (직계 자식 포함)
<style>
/* container자손(직계자식포함)에 모두 적용함 */
.container div {
width: 100px;
height: 100px;
background-color: blue;
}
/* container의 직계자식에만 적용함 */
.container > div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="container">
<div>
<div>
</div>
</div>
</div>자손 선택자를 모두 적용시켰다가( 두 div 모두 파란색 스타일 적용 )
직계 자식만 적용하는 스타일이 추가로 적용됩니다 ( 직계자식만 red 스타일로 적용됨)
3.3 : 형제 선택자
형제 선택자는 특정 요소의 바로 뒤 또는 이후 모든 요소에 스타일을 적용하도록 합니다.
인접 형제 선택자 (+): 특정 요소 바로 뒤의 형제를 선택
일반 형제 선택자 (~): 특정 요소의 이후 모든 형제를 선택
<style>
.A + .B {
color : red;
}
.B + .C {
color : blue;
}
.E ~ .F {
color :blueviolet;
}
</style>
<p class="A">AAAAAAAAAAA</p>
<p class="B">BBBBBBBBBBBB</p>
<p class="C">CCCCCCCCCCCC</p>
<p class="E">EEEEEEEEEEE</p>
<p class="F">FFFFFFFFFFF</p>
<p class="F">FFFFFFFFFFF</p>
<p class="G">GGGGGGGGGGG</p>
4 : 가상 클래스 선택자
4.1 : 상태 가상 클래스 선택자
상태 기반 가상 클래스는 특정 상태에 있을때 요소의 스타일링을 변경할때 사용합니다.
:hover, :active, :focus, visited, :checked등 많은 상태 기반 클래스가 있습니다.
<style>
button:hover {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<button>버튼</button>
<button>버튼2</button>
물론 클래스 선택자와 가상 클래스 선택자를 결합한 방식도 가능합니다. 모든 부분이 아니라 특정한 부분만 적용하고싶을때가 많죠.
<style>
.button-one:hover {
width:50px;
height:50px;
background-color:red ;
}
</style>
<button class="button-one">버튼</button>
<button class="button-two">버튼2</button>
4.2 : 구조 가상 클래스 선택자
구조 기반 가상 클래스는 요소의 트리 구조 위치에 따라 스타일을 적용시킵니다.
:first-child, :last-child, :nth-child(), :not()등 매우 많은 구조 기반 가상 클래스가 있습니다.
<style>
ul li:first-child {
color:red;
}
ul li:last-child {
color:blue;
}
</style>
<ul>
<li> 첫 번째 아이템 </li>
<li> 첫 번째 아이템 </li>
<li> 첫 번째 아이템 </li>
<li> 첫 번째 아이템 </li>
<li> 첫 번째 아이템 </li>
</ul>
5 : 가상 요소 선택자
가상 요소 선택자는 HTML 요소의 실제 콘텐츠 외에도 추가적인 스타일링을 위해 사용되는 CSS 선택자입니다. 주로 ::before** , ::after 가 많이 사용됩니다.
두 선택자 모두 content 속성을 반드시 지정해야하며
before은 앞에(왼쪽) , after는 뒤에(오른쪽)에 content 요소가 추가 스타일링 됩니다.
<style>
.button {
width: 200px;
height: 200px;
}
.button::after {
content: "🔥";
}
.button::before {
content: "🔥";
}
</style>
<button class="button">버튼입니다</button>
그런데 저렇게만 쓸꺼면 그냥 button 태그에 쓰면 되는거 아닐까요??
<button class="button">🔥버튼입니다🔥</button>맞습니다. 이렇게 써도 똑같기는 합니다 무의미하기도 한것같습니다.
그래서 가상 클래스 선택자와 결합하여 동적인 스타일링을 할때 많이 사용됩니다.
hover시 애니메이션이 적용된 밑줄이라던지요.
<style>
.text {
background-color: rgb(222, 222, 222);
position: relative;
}
.text::after {
content:"";
display: block;
width:0;
height:2px;
background-color: black;
position: absolute;
bottom:-2px;
left:0;
transition: width 0.3s ease;
}
.text:hover::after {
width:100%;
}
</style>
<span class="text">Hover시 밑줄 애니메이션 구현</span>
6 : 선택자 우선순위
선택자가 여러개 사용될경우 또한 같은 속성을 지정하려 할경우 어떤걸 적용시킬까요??
무슨 기준으로 적용시킬까요? 기준은 있을까요? 예를들어
클래스 color : red vs id color : blue는 누가이길까요??? 어떤것이 적용될까요?
CSS에서 우선순위는 다음과 같은 순서와 점수 체계에 따라 계산됩니다:
0순위와, 1000점,100점,10점,1점,0점 순서대로 기억하면 될것같습니다.
0순위 : !important
인라인 스타일 (HTML 요소의 style 속성): 1000점
ID 선택자: 100점
클래스, 가상 클래스 선택자(:hover..),속성 선택자([type="text]...),: 10점
요소 선택자(div,p ...) , 가상 요소 선택자(::before.. ): 1점
전체 선택자 (*): 우선순위가 가장 낮음! 0점
만약 같은 우선순위를 가지게될경우 나중에 쓴 코드가 적용됩니다.
<style>
/* 0순위를 가지는 important */
#important {
color : red !important ;
}
/* id는 100점 */
#id {
color : blue ;
}
/* 클래스는 10점 */
.class {
color : green;
}
/* 요소 선택은 1점 */
div {
color:brown;
}
/* 복합 선택자는 합산된다! 110점 */
#content .title {
color: aqua;
}
/* 클래스 선택자 10점 */
.title {
color:black;
}
</style>
<p id="important" style="color:rgb(255, 25, 247)">important는 0순위다.</p>
<p id="id" style="color:rgb(255, 25, 247)">인라인 스타일은 우선순위는 1000점 </p>
<p id="id" class="class">id는 100점</p>
<div class="class">class는 10점</div>
<div class="class">요소 선택은 1점</div>
<div id="content">
<p class="title">복합 선택자는 합산(id+class=110)비교</p>
</div>
