🍁CSS Seletor의 성질
1. 선택자 충돌
2. 속성 충돌
3. 선택자 우선순위
선택자 충돌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div { color: red;}
div { font-style: italic; }
</style>
</head>
<body>
<div id="box1" class="box">상자</div>
</body>
</html>
특정 태그를 찾는 선택자는 N개 이상 선언할 수 있다.
물리적으로 문제가 되지는 않지만 코드 관리상 어려움이 있으므로 웬만하면 한 곳에 모아서 선언하는 게 좋다.
속성 충돌
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div { color: red; }
div { color: blue; }
</style>
</head>
<body>
<div id="box1" class="box">상자</div>
</body>
</html>
위 코드에서는 선택자 충돌과 속성 충돌이 동시에 발생하고 있다.
동일한 태그를 선택한 식별자들이 동일한 속성을 지정하면 충돌이 발생하며, 작성된 순서에 따라 마지막에 작성된 속성이 적용된다. 즉, 덮어쓰기가 적용이 된다.
#box1 { color: orange; }
.box { color: blue; }
div { color: red; }
그런데 위의 말대로 하면 파란색이 되어야 할 거 같은데, 주황색이 출력이 된다.
이는 선택자 우선순위 때문에 나오는 결과이다.
선택자 우선순위
속성 충돌이 발생하면 충돌이 발생한 속성들 간의 우선순위에 따라 속성이 적용된다.
선택자들의 점수를 계산하여 높은 점수의 선택자가 적용된다.
선택자 점수 계산
- a. 태그 선택자> 1점
- b. 클래스 선택자 > 10점
- c. 아이디 선택자 > 100점
특정지어서 구체적일수록 점수가 높기 때문에 아이디 선택자가 점수가 가장 높다.
태그 선택자는 "사람", 클래스 선택자는 "남자", 아이디 선택자는 "아이작"이라고 한 것이라고 볼 수 있다.
#box1 { color: orange; }
.box { color: blue; }
div { color: red; }다시 한번 코드를 보도록 하자.
#box1은 아이디 선택자이므로 100점짜리이기 때문에 색상이 orange로 적용된 것이다.
VS CODE에서의 점수 확인
<style>
body > div { color: blue; }
div { color: red; }
</style>
VS CODE에서는 마우스를 올려보면 점수를 확인할 수 있다.
body > div는 태그를 2개 사용했기 때문에 2점이고, div는 태그를 1개 사용했기 때문에 1점이다.
태그, 아이디, 클래스 동시 사용
태그와 아이디와 클래스를 모두 사용할 수 있다.
이 선택자의 점수는 1 + 10 + 100 = 111점이다.
다중 클래스 사용
클래스를 여러 개 사용할 수 있다.
주의할 점
/* 클래스 선택자 (0, 1, 0) */
.t1 { color: blue; }
/* 태그 선택자 (0, 0, 11) */
div > div > div > div > div > div > div > div > div > div > div{ color: red; }
현재 <div> 태그가 11개가 겹쳐있는 상태이다.
태그를 11개 사용하여 클래스의 점수를 뛰어 넘었지만 글자는 파란색으로 출력된다.
그 이유는 아무리 해도 태그는 클래스를 넘을 수 없기 때문이다.
점수는 같은 영역에서만 유효하다는 것을 기억하도록 하자.
