가상 클래스 (pseudo-class) / 가상 요소 선택자 (pseudo-element)
가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면,
가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.
선택자:가상클래스 {
속성: 값;
}
- :link, :visited, :hover, :active, :focus
- :link, 방문하지 않은 링크
- :visited, 방문한 링크
- :hover, 해당 요소에 커서가 위치할 때
- :active, 요소가 활성화 되었거나 클릭 되었을 때
- :focus, 해당 요소에 초점이 맞춰졌을 때
a:link {
color: blue;
}
a:visited {
color:purple;
text-decoration: none;
}
a:hover {
color: red;
}
a:active {
color: gray;
}
a:focus {
color: yellow;
}
- :first-child, :last-child
부모 요소의 전체 자식 요소들 중 첫 번째, 또는 마지막 요소를 선택하는 가상 클래스
자식 요소들의 순서를 기준으로 첫 번째, 또는 마지막 요소를 선택
<article>
<h1 class="item">타이틀</h1>
<p class="item">문단 1</p>
<p class="item">문단 2</p>
<p class="item">문단 3</p>
</article>article h1:first-child{}- "타이틀"을 선택
article p:first-child{}- 아무런 요소를 선택하지 않는다.
"article"의 자식 요소들 중 첫번째 나오는 "p"를 선택해서 "문단 1" 이 선택될 것 같지만,
"p:first-child" 는 순서상 첫번째 요소(first-child)이면서 "p"여야 한다.
동시 충족해야 하며, 따라서 조건에 만족하는 요소는 존재하지 않는다.
- :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n)
- :nth-child(n), 선택한 부모 요소의 자식 요소들 중 n번째 오는 자식 요소들을 선택
- :nth-of-type(n), 선택한 요소의 자식 요소들 중 n번째 오는 특정 태그인 자식 요소들을 선택
* nth-와 nth-last는 선택 방향이 반대
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<style>
#check > p:nth-child(2) {
color: red;
}
</style>
</head>
<body>
<div id="check">
<h2>어떻게 선택 될까?</h2>
<p>첫번째 단락</p> <!-- 선택 -->
<p>두번째 단락</p>
<p>세번째 단락</p>
<p>네번째 단락</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors</title>
<style>
#check > p:nth-of-type(2) {
color: red;
}
</style>
</head>
<body>
<div id="check">
<h2>어떻게 선택 될까?</h2>
<p>첫번째 단락</p>
<p>두번째 단락</p> <!-- 선택 -->
<p>세번째 단락</p>
<p>네번째 단락</p>
</div>
</body>
</html>
선택자::가상요소 {
속성: 값;
}
- ::before, ::after, ::first-letter, ::first-line, ::selection
- ::before, 블록 요소 앞에 내용을 삽입
- ::after, 블록 요소 뒤에 내용을 삽입
- ::first-letter, 블록의 첫 번째 문자를 선택
- ::first-line, 블록의 첫 줄을 선택
- ::selection, 사용자가 드래그로 선택한 블록 전체, 또는 일부를 선택
'Web > css' 카테고리의 다른 글
| CSS Box model (0) | 2021.08.16 |
|---|---|
| CSS 상속과 단위 (0) | 2021.08.16 |
| CSS Selector, 결합자 / 복합 선택자 (Combinators) (0) | 2021.08.16 |
| CSS 선택자, Selector (0) | 2021.08.16 |
| CSS란? (0) | 2021.08.16 |