Designer · Publisher
[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)
'M' 카테고리의 다른 글
| [자바스크립트&제이쿼리] 대입연산자, 문자결합연산자, 산술연산자, 증감연산자 (0) | 2017.05.31 |
|---|---|
| [자바스크립트&제이쿼리] 변수, 숫자, 문자, 논리값(블린) 데이터 등 (0) | 2017.05.28 |
| [자바스크립트&제이쿼리] .text() .html() .prepend() .append() .before() .after() .wrap() .wrapAll() .wrapInner() (0) | 2017.05.28 |
| [자바스크립트&제이쿼리] (0) | 2017.05.28 |
| [M] 모바일 높이값 (0) | 2017.05.19 |