Pseudo-elements
아무것도 없는 곳에 요소를 추가하여 스타일을 적용한 것처럼 처리할 수 있다고 해서 '의사(모조의) 요소' 라고 불림.
id, class, span 등으로 지정안해도 원하는 부분만 딱 선택할 수 있게 해주는 요소.
id, class, span 등으로 지정안해도 원하는 부분만 딱 선택할 수 있게 해주는 요소.
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.
EX) 사용예
/* The first line of every <p> element. */
p::first-line {
color: blue;
text-transform: uppercase;
}
::after
::before
::cue
::first-letter
::first-line
::selection
::slotted
::backdrop
::placeholder
::marker
::spelling-error
::grammar-error
EX) 적용예
/*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/
#special::first-letter {
color:green;
font-size:100px;
}
<head>
<style>
input[type="submit"]{
background-color: red;
}
</style>
</head>
<body>
<input type="password">
<input type="submit">
</body>
위의 코드에서, input submit에만 빨간 배경을 지정하고 싶으면 id를 지정한다거나 생각했을텐데,
input[type="sumbit"] 이라는 pseudo-element를 통해 따로 뭔가 만들지 않고 바로 언급해서 css적용.
<head>
<style>
/* 두번째 박스만 핑크로 */
.box:nth-child(2){
background-color: pink;
}
/* 짝수 번째 박스들만 골라서 레드로 */
.box.nth-child(2n){
background-color: red;
}
</style>
</head>
<body>
<!-- 단축키 : div.container>div.box*3 -->
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
