CSS 선택자 - 가상 클래스, 가상 요소

가상 클래스 선택자

1. 사용자의 행동에 따라 변화하는  상황에 따라서 요소를 발생하는 선택자

 

 

가상 클래스 선택자의 종류

선택자 종류	선택자의 의미	선택자 쓰는 법
ABC : hover	마우스 커서가 올라가 있는 태그 선택	a : hover {   color : red; } = a 태그에 마우스가 올라가 있을 때, 글자를 빨간색으로 변경
ABC : active	선택자 ABC 요소 위에서 마우스 오른쪽 버튼을 눌렸을 때 발생	a : active {    background-color : red; } a 태그를 사용자가 선택했을 때 배경색을 빨간색으로 바꿔라.
ABC : focus	input 태그를 클릭 한 뒤, 커서가 깜빡일 떄처럼 포커스가 올라가 있을 때 선택	input :focus {   background-color : orange; }
ABC : first-child	선택자 ABC의 형제 요소 중 첫번째라면 선택	.fruits span:first-child {  color : red; } .fruits라는 class 속성을 가진 태그의 자식 요소 들의 형제 중에 첫번째 태그가 span일 때 선택
ABC : last-child	선택자 ABC의 형제 요소 중 마지막이라면 선택	.fruits h3:last-child {  color : red; } .fruits라는 class 속성을 가진 태그의 자식 요소 들의 형제 중에 마지막태그가 h 3일 때 선택
ABC:nth-child(n)	선택자 ABC의 형제 요소 중 (n) 째라면 선택함.	.fruits *:nth-child(2) {      color : blue; } .fruits라는 class 속성을 가진 태그의 자식 요소 중에 어떤 요소 든 2번째를 가르키는 선택자. 2가 아니라 변수가 올수도 있음  2n :  2배수 번째 자식 선택 n+2 : 0부터 시작해 2씩 더한 번째 자식 요소를 선택함.
ABC : not(span)	특정 태그가 아닌 나머지 태그 선택	.fruits *:not(span) {    color : red; } .fruits라는 class 속성을 가진 태그의 자식 요소 중에 span이 아닌 태그들을 가르키는 선택자.

 

 

가상 요소 선택자

선택된 요소의 앞, 뒤에 별도의 Content를 삽입하는 선택자.
반드시 content라는 속성을 사용하며, 빈값이라도 넣어주어야 적용됨.,

 

가상 요소 선택자의 종류

선택자 종류	선택자의 의미	선택자 쓰는 법
ABC::before	선택자 요소의 내부 앞에 내용을 삽입	.box::before {   content : "앞!" } = box라는 class 를 가진 테그의 내부 맨 앞에 앞!! 이라는 글자 추가.
ABC::after	선택자 요소의 내부 뒤에 내용을 삽입	.box::after{   content : "뒤!" } = box라는 class 를 가진 테그의 내부 맨 뒤에 뒤!! 이라는 글자 추가.

 

#.  가상 요소 선택자는 왜 사용하는가?

• 실제로 의미 없는 HTML 태그를 만들어두지 않고, 요소 삽입이 가능하여 자주 사용
• 쇼핑몰 홈페이지 메뉴에 Hot, 추천 등을 넣기 위해 별도의 태그를 삽입하지 않고, 가상 요소 선택자를 사용해서 처리하면 코드가 깨끗해짐.

 

속성 선택자

지정한 특정 속성을 가지고 있는 태그를 선택하는 선택자.

선택자 종류	선택자의 의미	선택자 쓰는 법
[ABC]	속성 ABC를 포함한 요소 선택	<input type="text" value="abcd" disabled> [disabled] {   color : red; } = disabled 속성이 활성화 되어 있으면 글씨를 빨간색으로 표시해라.
[ABC="XYZ"]	속성 ABC가 XYZ라는 값을 가지고 있다면 선택	[type="password"] {   color : pink; } input 태그의 type 속성이 password라면 그 태그의 글자색을 pink로 바꿔라.