CSS Selector 선택자 연습할 수 있는 사이트 : CSS Diner

https://flukeout.github.io/

CSS Diner

 

 

CSS 선택자를 연습할 수 있는 사이트이다.

페이지에 접속하면 아래와 같이 화면이 뜨는데, 상단의 문제에 맞게 Editor에 작성하면된다.

태그명이 plate인 태그를 선택하는 것이니, css editor에 plate라고 쓰면 성공이다 ㅎㅎ

 

 

오른쪽 html코드를 참고하면서 문제를 하나씩 풀어가면된다!

 

 

 

 

아래는 1번~32번의 정답이다.

1	plate	태그 선택하기
2	bento	태그 선택하기
3	#fancy	id선택하기
4	plate apple	태그(plate) 안의 태그(apple) 모두 선택하기
5	#fancy pickle	id가 붙은 태그 안의 태그(pickle) 선택하기
6	.small	class 선택하기
7	orange.small	태그(orange) 중 class(small)가 붙은 태그 선택하기
8	bento orange.small	태그(bento) 안의 태그(orange) 중 class(small)가 붙은 태그 선택하기
9	plate, bento	태그들(plate와 bento) 선택하기
10	*	모든 태그 선택하기
11	plate *	태그(plate) 안의 모든 태그 선택하기
12	plate + apple	태그(plate) 다음에 오는 태그(apple) 한개 선택하기
13	bento ~ pickle	태그(bento) 다음에 오는 태그(pickle) 모두 선택하기
14	plate > apple	태그(plate) 바로 다음에 오는 태그(apple) 선택하기
15	orange:first-child	태그 중 첫번째 요소 선택하기
16	plate :only-child	태그 중 자식요소 선택하기 (plate와 : 사이의 공백 주의)
17	.small:last-child	태그 중 마지막 요소 선택하기
18	plate:nth-child(3)	태그 중 3번째 요소 선택하기
19	bento:nth-last-child(3)	태그 중 마지막에서 역순으로 3번째 요소
20	apple:first-of-type	태그 중 첫번째 요소
21	plate:nth-of-type(2n)	태그 중 2의 배수번째 요소
22	plate:nth-of-type(2n+3)	태그 중 3번째부터 시작하고, 그 후로는 2의 배수번째 요소 선택
23	plate .small:only-of-type	유일한 plate .small 선택
24	orange:last-of-type, apple:last-of-type	각 태그 중 마지막요소 선택
25	bento:empty	자식이 없는 태그 선택
26	apple:not(.small)	태그(apple) 중 .small 클래스가 없는 태그(apple) 선택
27	[for]	for속성이 붙은 태그 선택
28	plate[for]	태그 중 for속성이 붙은 태그 선택
29	bento[for="Vitaly"]	태그 중 for속성 값이 Vitaly인 태그 선택
30	[for^="Sa"]	for속성 값이 Sa 로 시작하는 태그 선택
31	[for$="ato"	for속성 값이 ato로 끝나는 태그 선택
32	[for*="obb"]	for속성 값에 obb가 포함된 태그 선택

 

 

완료!