선택자에도 우선순위가 있다.
div{
color:red;
}
div.blue{
background-color: blue;
color:blue;
}CSS를 작성하면서 내가 원하는 설정이 먹히지 않는 경우가 있다. 이 경우 div 요소의 글자색이 파란색으로 보이게 된다. 왜 그럴까?
CSS에서 설정한 선택자 우선순위때문인데, CSS파일 안의 선택자들 사이에 우선순위에 대한 3가지 원칙으로 원하는 값이 적용되지 않을 수 있다.
1. 후자 우선의 원칙
동일한 선택자가 사용되었고 속성의 값만 다르다면 가장 마지막에 적힌 선택자 속성의 값이 적용된다.
다음의 경우 <h1>Hello</h1>은 분홍색 바탕에 초록색 글자로 보인다. 여기서 초록색 글자로 보이는 경우가 후자 우선의 원칙이 적용된 것이다.
h1{
background-color: pink;
color: red;
}
h1{
color: green; 👑
}2. 구체성(Specificity)의 원칙
같은 태그를 가르키더라도 더 구체적으로 작성된 선택자가 우선으로 적용된다. 이 구체성에 대한 기준은 가중치로 판단한다. 가중치는 점수로 계산되며, (금메달, 은메달, 동메달)이라고 생각하면 점수 계산이 수월하다.
| 선택자 | 점수 | (금🥇, 은🥈, 동🥉) | 작성법 |
|---|---|---|---|
| 전체선택자 ( * ) | 0점 | (0, 0, 0) | * { } |
| 타입, 가상요소 선택자 | 1점 | (0, 0, 1) | h1 { } |
| class, 가상클래스, 속성선택자 | 10점 | (0, 1, 0) | .class-name{ } li:nth-child(){ } li[class^="name"]{ } |
| id 선택자 | 100점 | (1, 0, 0) | #idName{ } |
| inline-style | 1000점 | (1, 0, 0, 0) | < h1 style=" " > |
| !important | 10000점 | (1, 0, 0, 0, 0) | selector{ property: value; !important} |
p.test{
color: red; 👑
}
p{
background-color: pink;
color: blue;
}3. 중요성의 원칙
다른 속성보다 더 우선적으로 적용되어야 할 중요한 속성이 있다면 !important 를 속성 값 다음에 추가한다. !important를 사용하면 다른 선택자의 속성들을 무시하고 !important 준 값을 무조건 우선적으로 사용된다.
!important는 위에 표에는 점수로 표현되어 있지만 가중치 점수를 무시하고 가장 무조건 우선이 되어 순위를 가진다. 다만 이렇게 하면 추후 유지보수할 때 어려워지기때문에 피치못할 상황이 아니라면 사용하는 것을 지양한다.
p{
color: red; !important 👑
}
p.class.test{
background-color: pink;
color: blue;
}
p#idName{
color: green;
}속성 선택자? 그게 뭔데...
속성 선택자로 특정 속성이나 값을 가진 요소를 선택하여 스타일을 줄 수 있다. 속성 선택자로는 아주 다양한 종류가 있지만 여기서는 대체로 사용하는 것 위주로 작성했다.
-
태그[속성이름]
속성이름에 해당되는 속성을 가진 태그를 모두 선택합니다.- div[class] => div 태그이면서 class 속성을 가지고 있는 요소
-
태그[속성이름="변수"]
속성이름의 속성값이변수와 일치하는 태그를 선택합니다.- div[class="test"] => div 태그이면서 class명이 test인 요소
-
태그[속성이름~="변수"]
속성이름의 속성값이변수를 포함하는 태그를 선택합니다. (단어)- div[class~="test"] => div 태그이면서 test인 class를 가지고 있는 요소(공백을 포함)
-
태그[속성이름*="변수"]
속성의 속성값이변수를 포함하는 태그를 선택합니다. (문자열)- div[class*="test"] => div 태그이면서 class 중 test 문자열을 포함하는 요소
-
태그[속성이름^="변수"]
속성의 속성값이변수로 시작하는 태그를 선택합니다.- div[class^="test"] => div 태그이면서 class 속성 값이 test로 시작하는 요소
-
태그[속성이름$="변수"]
속성의 속성값이변수로 끝나는 요소를 선택합니다.- div[class$="test"] => div 태그이면서 속성값이 test로 끝나는 요소
-
태그[속성이름|="변수"]
속성의 속성값이변수이거나변수로 시작하는 태그를 선택합니다.- a[href|="http"] => a 태그이면서 href 속성값이 http이거나 http로 시작하는 요소
- 언더바(_), 공백, 합성어가 포함될 경우 적용되지 않으며, 독립된 값이거나 하이픈을 포함하는 값은 선택된다.
가상의 세계에 존재하는 선택자들
가상 클래스 선택자(Pseudo class selector)
실재로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는것 처럼 작동해서 가상 클래스 선택자라고 한다. 가상 클래스 선택자 또한 아주 다양한 종류가 있지만 여기서는 대체로 사용하는 것 위주로 작성했다.
선택자:nth-child()
- 선택자:nth-child(n): 선택자 중 n번째 자식인 엘리먼트를 선택
- 선택자:nth-child(odd):선택자 중 홀수 번째 자식인 엘리먼트를 선택
- 선택자:nth-child(even):선택자 중 짝수 번째 자식인 엘리먼트를 선택
부정 가상 선택자
선택자:not()
비교적 최신에 채택된(레벨3) 선택자로 지원하는 브라우저가 적다.
li:not(.test){ color: red;} => 클래스명이 test가 아닌 모든 li의 글자색을 빨강색으로 바꾼다.
상호 작용을 위한 가상클래스
-
:hover
사용자가 마우스를 요소 위에 올렸을 때 적용된다. 터치스크린 기기 증가로 손가락이 호버되는 시점을 알 수 없어 사용빈도가 줄어드는 추세이다. -
:active
사용자가 요소를 실행할 때(버튼을 누르거나 링크를 클릭할 때) 적용한다. -
:focus
요소에 포커스가 있을 때 적용되는 클래스로 클릭할 수 있는 요소나 폼 요소(input, select) 등 상호작용 할 수 있는 모든 요소에 사용가능하다.
가상 요소 선택자
- 가상 요소 선택자는 마크업 없는 요소를 삽입하는 선택자로 많이 사용되는 것으로는
::before와::after가 있다. - 브라우저, OS 스크린리더에 따라 가상요소 선택자를 읽을 수도 있고 읽지 않을 수도 있다.(‘맥 보이스오버’에서 읽힌다.)
- 가상 요소 선택자는 콜론이 2개(::) 붙여 사용하지만, 간혹 가상요소 선택자에 콜론이 1개(:)만 보이는 경우가 있다. 이것은 레거시 브라우저 호환을 위해 한개만 작성한 것이다.
- 가상요소 선택자
::before와::after는 인라인 요소이며 추가될 때 위치는 다음과 같다.
