pseudo selectors
가상선택자(pseudo selector) 직접 id, class, tag를 사용하지 않고 세부적으로 엘리먼트를 선택하는 방법입니다.
정의를 봤을때 pseudo selector가 어떤것인지 와닿지 않아 몇가지 예제를 통해 알아보겠습니다.
<!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>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</body>
</html>예제에서 여러 div태그들을 개별적으로 다루기 위해선 어떻게 해야할까요?
- div마다 id를 정의하고 css에서 style을 적용한다.
- div마다 class를 정의하고 css에서 style을 적용한다.
이런 방식이 있습니다.
하지만 매번 하나의 태그마다 하나의 id나 class를 부여하는 것은 매우 비효율적입니다.
이때 pseudo selector을 사용할 수 있습니다.
<style>
div:first-child{
background-color: aqua;
}
div:nth-child(2n){
background-color: tomato;
}
</style>
이렇게 pseudo selector을 사용하여 특정 엘리먼트를 선택하여 style을 적용할 수 있습니다.
(first:child, nth:child() 이외에도 수많은 pseudo selector이 있고 모두 외울필요는 없습니다!)
pseudo selector MDN ==> pseudo selector의 종류와 기능들을 알아보기 좋은 사이트입니다.
state selectors
state selectors도 위에서 설명한 가상선택자(pseudo selectors)의 한 종류입니다.
하지만 따로 설명하는 이유는 그만큼 많이 사용하기 때문이고 약간의 특이점이 있기 때문입니다.
F12를 통해 개발자도구를 들어가 확인해보면 Force element state라는 녀석들이 따로 존재합니다.
이 친구들은 css 이벤트에서 발생하는 element들입니다.
pseudo selectors로도 이 state selectors들을 제어할 수 있습니다.
자주 사용하는 state selectors
- :active : 보통 버튼과 링크에 사용되며 element가 활성화될때 지정된 style을 반환합니다. ('활성' 이란 마우스를 사용하는 경우 눌렀을때부터 ~ 떼는 시점까지를 의미)
- :hover : 포인팅장치(마우스)를 사용해 마우스가 해당 element의 위에 존재할 경우 지정된 style을 반환합니다.
- :focus : 클릭하여 대상을 지정한 동안 style을 반환합니다.
state selectors도 pseudo selectors의 일부이므로 MDN에서 자세한 태그와 예제를 확인할 수 있습니다.
attribute selectors
특성 선택자(attribute selectors)는 id나 class가 아닌 속성값을 통해 특정 element를 선택하는 방법입니다.
<!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>Document</title>
</head>
<body>
<form action="#">
<input type="text" required placeholder="id">
<input type="password" placeholder="password">
<input type="button" value="submit">
</form>
</body>
</html><style>
input:required{
background-color: tomato;
}
input[type="password"]{
background-color: aqua;
}
</style>
이처럼 id나 class가 아닌 속성값들을 통해 style을 지정하는 방법이 attribute selectors입니다.
관련 MDN 주소 : https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors
combinators
연결자 혹은 결합자로 불리는 combinators는 선택자(selectors)들 사이의 관계를 설명하는 역할을 합니다.
combinators의 종류는 4가지가 있습니다.
-
자손 결합자 (공백) : 자손 결합자는 지정된 태그의 자손을 모든 노드에서 검색하고 선택합니다.
(div span은<div>태그 내에 위치한 모든<span>태그를 의미합니다.) -
자식 결합자 (>) : 자식 결합자는 지정된 태그의 직접적인 자녀만 선택합니다.
(div > p는<div>태그의 직계 자식에서만<p>를 찾아 선택합니다.) -
인접 형제 결합자 (+) : 인접 형제 결합자는 지정된 태그와 같은 레벨의 인접 노드만 선택합니다.
(div + p는<div>태그의 인접 형제 중 가장 가까운<p>태그를 찾아 선택합니다.) -
일반 형제 결합자 (~) : 인접 형제 결합자와 달리 같은 레벨의 모든 형제 노드들을 찾아 선택합니다.
