![[2021/12/31]국비지원 CSS3 11-(1) psuedo-class, property selector](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdq0IGQ%2Fbtrsc1dzyOs%2FhIJTM5fGrnFItfCQJjHlC0%2Fimg.jpg)
- psuedo-class
- :first-child
- :nth-child(n) : n번째
- :nth-child(odd) : 홀수번째
- :nth-child(even) : 짝수번째
- :nth-child(3n) : 3배수
- :last-child
- :nth-last-child(n) : 뒤에서 n번째
- :empty : 비움
- :first-of-type
- :nth-of-type(n)
- :nth-last-of-type(n)
- :last-of-type
- :only-child
- :only-of-type
dl dt dd에서는 type이 더 직관적 (이라고 함)
<!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 Psuedo-class</title>
<style type="text/css">
li{float:left;margin-right:30px;list-style-type:none;font-size:48px;
font-family:Arial, Helvetica, sans-serif;}
/* :nth-child() 앞에서 n번째 */
li:nth-child(odd){color:red} /* 홀수 */
li:nth-child(even){color:blue} /* 짝수 */
li:nth-child(3n){color:yellow} /* 3배수 */
li:nth-child(5){color: black;}/* 5번째 */
li:first-child{background: black;}
li:last-child{background: gray;}
/* :nth-last-child() 뒤에서 n번째 */
li:nth-last-child(1){color: orange;}
/* :empty */
li:empty{border:1px solid red;padding:50px;}
/*
:nth-of-type() 같은 유형 n번째
:nth-last-of-type() 뒤에서 같은 유형 n번째
:first-of-type 같은 유형 첫번째
:last-of-type 같은 유형 마지막
:only-child 유일한
:only-of-type 해당 유형의 유일한
*/
dl{clear:both;}
dl dt, dl dd{margin:0;}
/* dl에는 type이 더 직관적 */
dt:nth-child(3){background: yellow;}
dt:nth-of-type(2){color:red;}
dd:nth-child(8){background: aqua;}
dd:nth-of-type(4){color: blue;}
dt:first-of-type{color: orange;}
dt:last-of-type{color:green;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li></li>
<li>9</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
<dt>dt</dt>
<dd>dd</dd>
<dt>dt</dt>
<dd>dd</dd>
<dt>dt</dt>
<dd>dd</dd>
</dl>
</body>
</html>
결과물
- property selector : 속성선택자
- 띄운 칸 : 하위의 모든 해당 element
- > : 자식 element
- + : 인접 element
- ~ : 형제 element
- [property]
- [property^="property start"]
- [property$="property end"]
- [property*="include property"]
<!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>Document</title>
<style type="text/css">
div.title p{color: red;}
div.title>p{color: green;}
h1+h2{color: blue;}
h1~h2{background: yellow;}
/* 하위 / 자식 / 인접 / 형제 */
a[title]{text-decoration: underline;}/* 속성선택자 */
/* ex) input[type="image"]{} */
/* 속성^="속성값 시작" / 속성$="속성값 마지막" / 속성*="속성값 포함" */
a[href^="http"]{color:orange;}
a[href$="html"]{text-decoration: none;}
a[href*="www"]{font-style: italic;}
</style>
</head>
<body>
<h1>CSS 선택자</h1>
<h2 title="속성 선택자">속성 선택자</h2>
<p>웹 표준이 지원되는 최신 웹 브라우저에서 사용할 수 있는 선택자 방식</p>
<h2>속성선택자의 활용</h2>
<ul>
<li><a href="#test.html">속성선택자 test</a></li>
<li><a href="http://www.w3c.org">웹 표준</a></li>
</ul>
<div class="title">
<h3>웹 접근성의 정의</h3>
<p>
<a href="#" title="홈페이지로 바로가기">홈</a> >
<a href="#">웹 접근성의 이해</a> >
<em>웹 접근성의 정의</em>
</p>
<div>
<p>손자</p>
</div>
</div>
</body>
</html>
결과물
