![[2021/12/29]국비지원 CSS3 9-(4) psuedo-element, psuedo-class :first](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fo2sbD%2Fbtrr5UGvz33%2FAAAAAAAAAAAAAAAAAAAAAFO_0Gs8bqFaqjfH8GEdXRFg1hEoui_t6YND6gmkn7ie%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DyPqWh9%252FAQspvSJ%252BI0UkWF51WkZs%253D)
12월 31일자 내용에서 한 번에 정리할 계획
- psuedo-element : 가상요소 ( 쌍 콜론 :: )
- ::first-line : 해당 element 첫번째 줄의 콘텐츠
- ::first-letter : 해당 element 의 첫번째 글자
- psuedo-class : 가상클래스 ( 단일 콜론 : )
- :first-child ( 첫째놈 )
- :last-child ( 막둥이 )
::first-line, ::first-letter
<!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>css3:first-line,first-letter</title>
<style type="text/css">
.line>p::first-line{text-decoration: underline;}
.letter>p::first-letter{font-size: 5em;}
</style>
</head>
<body>
<div class="line">
<p>
요소의 첫번째 줄에 있는 콘텐츠만 선택하여 스타일을 지정할 때 사용하는 선택자
방식으로 first-line 가상 요소 선택자라고 부릅니다. first-line 가상요소 선택자를
지정할 경우 고정된 영역이 아닌 웹브라우저 크기에 따라 유동적으로 스타일이 적용됩니다.
</p>
</div>
<div class="letter">
<p>요소의 첫번째 글자만 선택하여 스타일을 지정할 때 사용하는 선택자방식</p>
</div>
</body>
</html>
결과물 ( 화면분할모드 브라우저 = 전체창모드 50% )
결과물 ( 전체창모드 )
:first-child, :last-child
<!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>css3:first-child 가상클래스, ~ 형제선택자, + 인접형제선택자</title>
<style type="text/css">
.child>p:first-child{color: green;}
.child>p:last-child{color:blue;}
h2~div{text-decoration: underline;} /* h2 뒤에 있는 형제 div 죄다 선택 */
h2+div{font-weight:bold;font-style: italic;}/* h2 인접 형제 div만 선택 */
</style>
</head>
<body>
<h2>first-child 가상 클래스</h2>
<div class="child">
<p>first-child 가상 클래스는 첫 번째 자식 요소에만 스타일을 적용할 수 있는 선택자입니다.</p>
<p>child 클래스의 두 번째 자식 요소에는 스타일이 적용되지 않습니다.</p>
<p>child 클래스의 세 번째 자식 요소에는 스타일이 적용되지 않습니다.</p>
</div>
<h2>first-child 가상 클래스</h2>
<div class="child">
<p>first-child 가상 클래스는 첫 번째 자식 요소에만 스타일을 적용할 수 있는 선택자입니다.</p>
<p>child 클래스의 두 번째 자식 요소에는 스타일이 적용되지 않습니다.</p>
<p>child 클래스의 세 번째 자식 요소에는 스타일이 적용되지 않습니다.</p>
</div>
<h2>first-child 가상 클래스</h2>
<div class="child">
<p>first-child 가상 클래스는 첫 번째 자식 요소에만 스타일을 적용할 수 있는 선택자입니다.</p>
<p>child 클래스의 두 번째 자식 요소에는 스타일이 적용되지 않습니다.</p>
<p>child 클래스의 세 번째 자식 요소에는 스타일이 적용되지 않습니다.</p>
</div>
</body>
</html>
결과물
