📝 CSS 선택자 우선 순위
기본적으로 css 속성은 style 태그 또는 css 파일에 작성된 순서(위->아래)대로 해석이 진행되지만
같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.
📌 알아두어야 할 것
1) 동일한 우선 순위로 css 속성이 설정된 경우 -> 제일 마지막에 작성된 css 속성이 반영된다.
2) 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 css 속성이 다르면 모두 반영된다.
💡 우선 순위
1순위 : css 속성 : 속성값 !important;
2순위 : inline-style 속성 (요소에 직접 작성되는 style 속성)
3순위 : 아이디 선택자 (#아이디 속성명)
4순위 : 클래스 선택자 (.class 속성명)
5순위 : 태그 선택자 (태그명)
✏️ 예시로 알아보기
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06_선택자 우선순위</title>
<link rel="stylesheet" href="css/selector6.css">
</head>
<body>
<!-- 2순위 : inline-style -->
<div class="cls1" id="test1" style="background-color: pink;">우선순위 테스트</div>
</body>
</html>- css
/* 5순위 : 태그 선택자 */
div{
width: 200px;
height: 200px;
background-color: lavender !important;
}
/* 4순위 : 클래스 선택자 */
.cls1{
background-color: lightblue;
/* 배경색이 lightblue로 변경되지만, 겹치지 않는 width/height는 그대로 반영됨 */
}
.cls1{
background-color: darkseagreen;
/* 동일한 우선 순위에선 마지막에 작성된 설정값이 적용된다. */
}
/* 3순위 : 아이디 선택자 */
#test1{
height: 100px;
background-color: black;
color: white;
}
- 출력 화면
-> lavender 색상은 '5순위 : 태그 선택자'에 작성된 내용이지만,
뒤에 !important;가 붙어 1순위로 지정되어 화면에 출력되는 것을 볼 수 있다.
풀스택 개발자 기록집 📁