selector { property: value; }
p {
color: pink;
}
<head>
<title>World</title>
<link href="./style.css" rel="stylesheet">
</head>
* {
}
.class {
}
#id {
}
div:nth-child(2) {
font-size:16px
}
div:hover {
font-size:16px
}
/* 선택자 위에 마우스 커서가 있을 때 */
div:active { font-size:16px }
/* 선택자가 클릭된 상태일 때 */
div:focus { font-size:16px }
/* 선택자가 마우스나 키보드에 의해 선택되었을 때 */
div:visited { font-size:16px }
/* 선택자(링크인 경우)가 이미 방문한 사이트일 때 */
a[target] {
color: red;
}
/* a 태그에 target이라는 속성을 가진 요소를 선택 */
a[target="_blank"] { color: red; }
/* a태그에 target=”_blank”라는 속성을 가진 요소를 선택 */
div[class~="apple"] { color: red; }
/* apple이라는 class를 가진 요소를 선택 */
div[class^="apple"] { color: red; }
/* apple이라는 class로 시작하는 요소를 전부 선택 */
div[class$="apple"] { color: red; }
/* apple이라는 class로 끝나는 요소를 선택 */
div[class*="apple"] { color: red; }
/* apple이라는 class를 가진 모든 요소를 선택 */