CSS:PseudoClasses
단일 콜론(:)으로 나타내며, 요소의 특정 상태를 선택하는 데 사용.
:root
웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다.
:root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다. 즉, html에서 :root은 항상 <code>
<html>
</code>을 가리킨다.
그러나 <code>
<html>
</code>보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다. 문서 전반적으로 재사용할 임의가 있는 값을 작성한다.
:root을 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다. 이렇게 :root을 사용하여 변수를 사용하게 되면 한 번에 수정이 용이하다.
:root 변수 선언
웹 문서에서 공통으로 사용될 속성을 미리 변수에 선언한다.
--(하이픈 2개) 다음 속성 이름을 정해주고 :(콜론) 뒤에 속성 값을 적어준다.
:root {
/* color */
--color-black: #3f454d;
--color-white: #ffffff;
--color-yellow: #fbbe28;
/* size */
--base-space: 8px;
--size-button: 60px;
--size-border: 4px;
--font-size: 18px;
}
:root 변수 사용
var로 변수를 선언하고, 소괄호 안에 속성 값을 입력한다.
.colorBtn {
font-size: var(--font-size);
padding: calc(var(--base-space) * 1.8);
border-radius: var(--size-border);
}
.item {
background-color: var(--color-white);
display: flex;
align-items: center;
padding: var(--base-space);
margin-bottom: var(--base-space);
}
:not()
부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. X는 다른 부정 선택자를 포함해서는 안 됩니다.
:has()
:is()
:where()
:first-child and :last-child
:nth-child
p {
font-weight: bold;
}
li:nth-child(-n + 3) {
border: 2px solid orange;
margin-bottom: 1px;
}
li:nth-child(even) {
background-color: lightyellow;
}