헷갈리기 쉬운 선택자.
장식적인 요소를 html 태그 없이 구현하고 싶을때 사용한다.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Pseudo-classes - CSS: Cascading Style Sheets | MDN
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Pseudo-elements - CSS: Cascading Style Sheets | MDN
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
developer.mozilla.org
번역본과 원문도 그냥 훑어봤다.
공통적으로 둘 다 가상(pseudo)의 것을 만들어 기능하게 해준다.
가상 클래스(Pseudo-class, : )
사용법
/*Selector*/ : /*Pseudo-class*/ {
/* property : value */
}이렇게 하면 pseudo-class에 해당하는 selector에 가리키는 tag, class, id 등이 선택된다!!
다시 말하면 pseudo-class인 selector!
ex.
p:nth-child(3) {
color: red;
}존재하지도 않는 class로 원하는 element를 선택할 수 있을 것이다. (위 예시는 동등한 위치에 있는 p 태그들 중 3번째 것을 선택할 수 있게 해줄 것이다.)
가상 요소(Pseudo-element, :: )
사용법
/*Selector*/ :: /*Pseudo-element*/ {
/* property : value */
}ex.
p::after { content: 'cm'; }이런 식으로
<head>
<style>
p::after {
content: 'cm';
}
</style>
</head>
<body>
<p>10</p>
</body>없는 요소를 넣을 수 있는 것
10cm이렇게 출력은 되지만 cm가 선택되지는 않는다. 신기하네. 그렇기 때문에 중요한 내용을 넣지 말고 오직 장식적인 요소로 활용해야한다.
하지만 아직 어디에 쓸모가 있을지 감은 안온다.
간단하게 생각해보면 스크린 리더가 굳이 읽어줄 필요가 없는 요소(element)나 HTML 태그씩이나 할당해줄 필요가 없는 요소, 정말 장식적인 요소들에 사용될 수 있다. 버튼 모양을 가상요소의 배경이미지로 바꿔서 넣어줄 수도 있고. 쓸 곳은 엄청 많다.
'Etc. > CSS' 카테고리의 다른 글
| [CSS] flex (0) | 2021.11.06 |
|---|---|
| [CSS] inline element (0) | 2021.11.05 |
| [CSS] 선택자 우선순위 계산 (0) | 2021.11.03 |
| [CSS] float (0) | 2021.10.29 |
| [CSS] 선택자(후손 및 자손, 동위) (0) | 2021.10.28 |
댓글