css 알아두기

이번 css는

자주는 아니지만 알아두면 좋은 것들이다.

그냥 이해만 해두자

Selector	구분예제	css	결과	비고
:active	<a href="1">111</a> <a href="2">222</a>	a:active {background-color: yellow;}	111 222	마우스 클릭시 배경색을 준다
::after	<p>1</p> <p>2</p>	p::after {content: "- txt"; background-color: yellow;}	1- txt 2- txt	p 태그 뒷쪽에 추가로 나온다
::before	<p>1</p> <p>2</p>	p::before {content: "txt -"; background-color: yellow;}	txt -1 txt -2	p 태그 앞쪽에 추가로 나온다
:checked	<input type="radio" checked="checked" value="1" name="gender">1 <input type="radio"  value="2" name="gender">2 <input type="checkbox" checked="checked" value="3">3 <input type="checkbox" value="4">4	input:checked {height: 30px;width: 30px;}	1 2 3 4	checked 에 해당하는 부분만 적용
:disabled	<input type="text" value="11"> <input type="text" value="22"> <input type="text" disabled="disabled" value="33">	input[type=text]:disabled {background: #yellow;} input[type=text]:enabled {background: #dddddd;text-align:center}		비활성화된 요소에만 적용
:enabled				활성화된 요소만 적용
:empty	<p></p> <p>1</p>	p:empty {background: #yellow;}	1	자식이 없는 곳에만 적용
:first-child	<p>1</p> <h2>A</h2> <p>2</p> <div>   <h2>B</h2>   <p>3</p>   <p>4</p> </div> <p>5</p>	p:first-child {background: #yellow;}	1 A 2 B 3 4 5	두개 이상의 첫번째 p 태그 적용
::first-letter	<p>111</p> <p>222</p> <h2>333</h2> <p>444</p>	p::first-letter {color: #yellow;}	111 222 333 444	p태그 첫번째 글자에만 적용
::first-line	<p>111<br>       222</p> <p>333</p>	p::first-line {color: #yellow;}	111 222 333	첫번째 p태그 모두 적용
:first-of-type	<p>111</p> <p>222</p> <p>333</p>	p:first-of-type {color: #yellow;}	111 222 333	첫번째 나오는 p태그만 모두 적용
:focus	<input type="text" name="11"> <input type="text" name="22">	input:focus {background-color: yellow;}		input 클릭시 적용
:hover	<a href="111">111</a>	a:hover {background-color: yellow;}	111	링크 클릭시 적용
:in-range	<input type="text" name="11">	input:in-range {background: yellow;}		지정된 범위내에 값이 있는 입력 요소 선택
:invalid	<input type="text" name="11">	input:invalid {background: yellow;}		잘못된 값으로 모든 입력 요소 선택
:lang(language)	<p>111</p> <p lang="it">222</p>	p:lang(it) {background: yellow;}	111 222	it과 동일한 속성을 가진 모든 p요소를 선택
:last-child	<p>111</p> <p>222</p> <p>333</p>	p:last-child {background: yellow;}	111 222 333	마지막 하위 p 태그 만 적용
:last-of-type	<p>111</p> <p>222</p> <p>333</p>	p:last-of-type {background: yellow;}	111 222 333	상위 p 요소의 마지막 모든 p 요소 적용
:link	<a href="111">111</a>	a:link {background: yellow;}	111	링크 적용
:not(selector)	<p>111</p> <h2>222</h2>	p {color: #000000;} :not(p) {color: #ff0000;}	111 222	p 태그 외의 것만 선택 적용
:nth-child(n)	<p>111</p> <p>222</p> <p>333</p>	p:nth-child(2) {background: yellow;}	111 222 333	2번째 p태그에만 적용
:nth-last-child(n)	<p>111</p> <p>222</p> <p>333</p> <p>444</p>	p:nth-last-child(2) {background: yellow;}	111 222 333 444	하단에서 2번째 p태그에만 적용
:nth-last-of-type(n)	<p>111</p> <p>222</p> <p>333</p> <p>444</p>	p:nth-last-of-type(2) {background: yellow;}	111 222 333 444	부모의 2번째 p 요소를 선택하고 하위에서 2번째 선택
:nth-of-type(n)	<p>111</p> <p>222</p> <p>333</p>	p:nth-of-type(2) {background: yellow;}	111 222 333	상위 2번째 p 태그만 적용
:only-of-type	<div>   <p>111</p> </div> <div>   <p>222</p>   <p>333</p> </div>	p:only-of-type {background: yellow;}	111 222 333	부모의 유일한 p태그만 적용
:only-child	<div>   <p>111</p> </div> <p>222</p> <div>   <p>333</p>   <p>444</p> </div>	p:only-child {background: yellow;}	111 222 333 444	부모의 유일한 p태그만 적용
:optional	<input> <input required>	input:optional {background: yellow;}		required 특석이 없는 입력 요소를 선택 적용
:out-of-range	<input type="number" min="5" max="10" value="17">	input:out-of-range {background: yellow;}		지정된 범위 외부 값을 사용하여 입력요소 적용
:read-only	<input value="111"> <input readonly value="222">	input:-moz-read-only { /* For Firefox */ background: yellow;} input:read-only {background: yellow;}		지정된 readonly 의 특성에 적용
:read-write	<input value="111"> <input readonly value="222">	input:-moz-read-write { /* For Firefox */ background: yellow;} input:read-write {background: yellow;}		지정된 required 의 특성에 적용
:required	<input> <input required>	input:required {background: yellow;}		지정된 readonly 의 특성에 적용
:root	<p>111</p>	:root {background: yellow;}	111	모든 요소들을 모두 적용
::selection	<p>111</p> <h2>222</h2>	::selection {background: yellow;}	111 222	드레그시 배경색이 바뀐다.
:target	<p><a href="#111">111</a></p> <p id="111"><b>111</b></p>	:target {background: yellow;}	111 111	링크시 배경이 적용된다.
:valid	<input type="email" value="111">	input:valid {background: yellow;}		valid 값을 가진 곳에 적용된다.
:visited	<p><a href="#111">111</a></p>	a:visited  {background: yellow;}	111	클릭된곳의 색을 바꾼다.