[HTML5&CSS3] 선택자/속성선택자/구조선택자
선택자
<style>
.list li {background-color:pink; width:200px;}
.list > li {background-color:skyblue;}
.sub ~ p {color:red;}
a:link {color:pink}
a:visited {color:skyblue}
a:hover {color:gray}
a:active {color:green}
</style>
속성 선택자
a 태그
a {color:#333;}
a 태그에 속성이 있는 경우
a[href] {color:red;}
a[target] {color:gray;}
a태그에 속성의 값이 일치하는 경우
a[target="_blank"] {color:gold;}
a태그의 href값이 http로 시작되는 경우
a[href^="http"] {color:skyblue;}
a태그의 href값에 www가 포함되는 경우
a[href*="www"] {color:pink;}
a태그의 href값이 net으로 끝나는 경우
a[href$="net"] {color:green;}
</style>
- 구조선택자
<style>
* {margin:0; padding:0;}
ul,ol,li {list-style:none;}
a {text-decoration:none; color:#333;}
.list {
width:500px;
margin:50px auto;
}
.list li {
float:left;
}
.list li a {
display:block;
width:100px;
line-height:40px;
text-align:center;
}
.list li:first-child a {background-color:pink;}
.list li:last-child a {background-color:skyblue;}
.list li:nth-child(odd) a {background-color:gray;}
</style>
css3 선택자, 하위 브라우저에서 인식X, (익스8 이하, 일부 익스10에서는 적용 X)
:first-child {} : 1번째 태그
:last-child {} : 마지막 태그
:nth-child(x) {} : x번째 태그
:nth-child(xn) {} : x의 배수
:nth-child(2n) {} : 짝수 (even)
:nth-child(2n+1) {} : 홀수 (odd)