31. CSS selectors 여러가지 CSS 선택자들(연결, 속성, 가상)

CSS를 적용할 때 사용되는 여러가지 선택자들

 

태그, id, 클래스 선택자

선택자	설명	예시
*	모든 요소	* { color : blue;}
#id	해당 id 속성	#속성값 { color : black; }
태그명	해당 요소	div { color : gray; }
태그명1, 태그명2	해당 요소1, 요소2	div, p { color : red; }
태그명1 태그명2	요소1 내부 모든 자식 요소2	div p { color : blue; }
태그명1 > 태그명2	요소1 내부 자식 요소2	div > p { color : black; }
태그명1 + 태그명2	요소1 첫번째 형제 요소2	div + p { color : blue; }
태그명1 ~ 태그명2	요소1 모든 형제 요소2	div ~ p { color : red; }
.class	해당 클래스 속성	.속성값 { color : red; }
.class1.class2	클래스1, 클래스2 모두 갖음	.속성값1.속성값2 { color : blue; }
.class1 .class2	클래스1 내부 모든 클래스2	.속성값1 .속성값2 { color : black; }
태그명.class	class 속성을 가진 요소	p.속성값1 { color : black; }

 

속성 선택자

선택자	설명	예시
[속성]	해당 속성을 지정한 요소	[href] { background : blue; }
[속성 = 값]	속성값이 일치	[type = "submit"] { background : red; }
[속성 ~= 값]	값이 포함되어 공백 연결일 때	[class ~= "container"] { font-size : 2em; }
[속성 |= 값]	값이 포함되어 하이픈 연결일 때	[class |= "container"] { font-size : 2em; }
[속성 ^= 값]	해당 값으로 시작	[href ^= "#"] { text-decoration : none; }
[속성 $= 값]	해당 값으로 끝	[href $= "org"] { color : red; }
[속성 *= 값]	해당 값이 포함	[class *= "table"] { font-weight : bold; }

 

가상 클래스, 요소 선택자

선택자	설명	예시
:link	방문하지 않은 하이퍼링크	a:link { color : black; }
:visited	방문한 하이퍼링크	a:visited { text-decoration : none; }
:hover	해당 요소에 커서가 올라감	p:hover { background : gray; }
:active	해당 요소를 활성화 시킬 때(탭, 클릭)	[type="submit"]:active { color : red; }
:target	앵커된 요소	#name:target { background : blue; }
:checked	체크박스가 체크되었을 때	input:checked { background : red; }
:disabled	input 태그 disabled 속성이 적용	input:disabled { background : gray; }
:read-only	read-only 속성이 적용	input:read-only { background : gray; }
:required	required 속성이 적용	input:required { font-weight : bold; }
:root	문서의 root 요소	:root { font-size: 2em; }
:nth-child	n번째 자식 요소	div p:nth-child(2){ }
:nth-last-child	뒤에서 n번째 자식 요소	div p:nth-last-child(2n+1){ }
:nth-of-type	n번째 같은 타입 요소	div p:nth-of-type(3){ }
:nth-last-of-type	뒤에서 n번째 같은 타입 요소	div p:nth-last-of-type(3){ }
:first-child	첫번째 자식 요소	div:first-child{ width : 920px; }
:last-child	마지막 자식 요소	div:last-child{ color : red; }
:only-child	오직 하나뿐인 자식 요소	:only-child { background : black; }
:first-of-type	첫번째 타입 요소	li:first-of-type { color : black; }
:last-of-type	마지막 타입 요소	li:last-of-type { }
:only-of-type	오직 하나 뿐인 타입 요소	:only-of-type { }
::after	마지막에 추가 내용을 적음	p::after { content : " - last "; }
::before	처음에 추가 내용을 적음	p::before { content : " first - "; }
::first-letter	첫 글자	p::first-letter { font-size: 200%; }
::first-line	첫 줄	p::first-line { font-weight : bold; }
::marker	리스트 마커	::market { color : red; }
::placeholder	input 요소 플레이스 홀더	::placeholder { }
::selection	드래그된 글자	::selection { color : red; }

자세한 예시는 아래 사이트를 확인

 

https://www.w3schools.com/cssref/css_selectors.php

CSS Selectors Reference