HTML 구조선택자,문자선택자, 전후 문자 선택자

HTML

by 기련이 2020. 5. 15. 17:47

h3:first-of-type {
	color: red;
}
h3:last-of-type {
	color: blue;
}
h3:nth-of-type(2n) {
	color: green;
}
---------------------------
<h3>첫번째 요소</h3>
<h3>두번째 요소</h3>
<h3>세번째 요소</h3>
<h3>네번째 요소</h3>
<h3>다섯번째 요소</h3>
<h3>여섯번째 요소</h3>

첫번째 (first-of-type)요소에 red컬러적용

last (마지막)요소에 블루컬러를입혔지만 뒤에오는 문때문에 적용이안됨.

nth-of-type (2n) : 두번째 요소마다 그린컬러를 적용해줌

h4:nth-last-of-type(2) {
	color: green;
}
----------------------------
<h4>h4 첫번째 요소</h4>
<h4>h4 두번째 요소</h4>
<h4>h4 세번째 요소</h4>
<h4>h4 네번째 요소</h4>
<h4>h4 다섯번째 요소</h4>
<h4>h4 여섯번째 요소</h4>

끝에 순서부터 두번쨰인 텍스트에 그린컬러를 넣어준모습.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자 선택자</title>
<style type="text/css">
p::first-letter {
	font-size: 3em;
}
p::first-line{
	color: red;
}
</style>
</head>
<body>
<!-- 첫번째 문자 / 첫번째 라인을 선택 -->
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ......</p>
<p>Maecenas scelerisque magna non luctus condimentum. ......</p>
</body>
</html>

p::p::first-letter { -처음 문자에 실행
font-size: 3em; - 폰트사이즈를 3em으로 적용
}
p::first-line{ -첫줄에 실행

color: red; -컬러 레드 적용
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>전후 문자 선택자</title>
<style type="text/css">
p{
	counter-increment: rint;
}
p::before{/*글이 시작하기전 페이지에 카운트(1,2...)를 붙여줌*/
	content: counter(rint)".";
}
p::after {/*글이 끝날때 실행됨*/
	content: " - " attr(data-page)" page";
}
p::first-letter { /*첫 글자에 실행*/
	font-size: 2em;
}
p::selection { /*드래그 했을시 실행되는 태그*/
	background-color: black;
	color: red;
}
</style>
</head>
<body>
<h3>Lorem Ipsum</h3>
<p data-page="52">Lorem ipsum dolor sit amet, ......</p>
<p data-page="273">Maecenas scelerisque magna non luctus condimentum. ......</p>
</body>
</html>

태그의 이전/이후에 스타일을 적용
::befor, ::after
content 속성을 사용 할 수 있음.
(content는 before와 after 선택자에서만
사용할 수 있음.)

before : 글이 시작하기전 페이지에 카운트(1,2...)를 붙여줌

after : 글이 끝날때 실행됨

first-letter : 첫 글자에 실행

selection : 드래그 했을시 실행되는 태그

'HTML' 카테고리의 다른 글

HTML 박스 모델 padding, margin, border (0)	2020.05.15
링크 선택자, 내용관련 속성 (0)	2020.05.15
HTML 구조 선택자 (0)	2020.05.14
HTML 가상 선택기 (0)	2020.05.14
HTML 계층 관련 선택자 (0)	2020.05.14