728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>의사 클래스</title>
<meta charset="UTF-8">
<style>
/*a {
color: red;
}*/
/*a:hover {
color: blue;
}*/
/* hover : 마우스를 올리면..*/
/*a:active {
text-decoration: underline;
}*/
/* active : 마우스를 클릭하면..*/
div > b:nth-child(1) {
color: red;
}
/* nth-child(x) : 같은 부모를 가지는 요소 전체 중 x번째 x는 1부터 시작*/
/* div 의 자식 전체 중 두번째 이면서 b인 요소*/
div > b:nth-of-type(2) {
color: red;
}
/* div의 자식인 b중에 두번째 */
div > a:last-child {
color: green;
}
/* x:last-child : x 요소 이면서 마지막 */
div > :last-child {
color: green;
}
/* 요소 상관없이 그냥 마지막 */
div > :first-child {
color: red;
}
/* 요소 상관없이 제일 처음요소 선택 */
div > :nth-child(odd) {
color: blue
}
/* 홀수 */
div > :nth-child(even) {
color: blue
}
/* 짝수 */
div > :not(:last-child) {
color: red;
}
/* 마지막을 제외하고 */
div > :not(:last-child) {
color: blue
}
/* 첫번쨰를 제외하고 */
input[type=text]{
background-color: blue;
}
input[type=text]:focus{
background-color: red;
}
input[type=text]:hover{
background-color: black;
}
</style>
</head>
<body>
<a>I'm a</a>
<div>
<b>A</b>
<a>B</a>
<b>C</b>
<a>D</a>
<b>E</b>
</div>
<input type="text">
</body>
</html>
728x90
반응형