Jeje’s Code Note/
[CSS] CSS selectors (CSS Diner 풀이)
Search
[CSS] CSS selectors (CSS Diner 풀이)

[CSS] CSS selectors (CSS Diner 풀이)

태그
web
css
ps
생성 일시
Apr 29, 2024 04:31 AM
최종 편집 일시
Last updated April 30, 2024
Date
CSS Diner는 css 선택자를 학습할 수 있는 사이트다. 이와 관련해 풀이를 작성하는 활동을 맡게 되어 본 게시글을 작성했다.
CSS Diner
A fun game to help you learn and practice CSS selectors.
CSS Diner
https://flukeout.github.io/
CSS Diner

기본 선택자

Level 1~2 (tag)

태그 선택자와 관련 된 문제이다. 가장 기본적인 선택자이다.

1 solution

💡
code
<div class="table">
	<plate />
	<plate />
</div>
plate /*태그를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
2번 문제의 풀이는 위와 같으나 해당 태그를 가지는 모든 요소가 선택됨을 꼭 알아두자.

2 solution

💡
code
<div class="table">
	<bento />
	<plate />
	<bento />
</div>
bento /*태그를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 3 (id)

ID 선택자와 관련 된 문제이다. 태그, 클래스 선택자와 함께 가장 기본적인 선택자이다.
#을 사용한다는 사실을 명심하자
id는 동일한 이름을 부여할 수 없다! → 고유한 요소에만 부여 가능 반면 class는 동일한 이름을 여러 번 부여 가능하다.
#다음에는 공백이 있으면 안된다!
solution
💡
코드
<div class="table">
	<plate id="fancy" />
	<plate />
	<bento />
</div>
#fancy/*fancy라는 id를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 4 (descendant)

특정 태그 내부의 태그(자식 태그)를 선택하는 선택자(Descendant Selector, 자손 선택자)와 관련 된 문제이다.
solution
💡
코드
<div class="table">
	<bento />
	<plate>
		<apple />
	</plate>
	<apple />
</div>
plate apple/*plate 내부의 apple 태그를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 5(id + tag)

3번과 4번을 응용하면 된다.
solution
<plate> 내부의 <pickle>을 선택해야 한다. 하지만 현재 내가 원하는 피클은 <plate id="fancy">태그 내부의 피클 이므로 id 선택자를 이용한 다음, <pickle> 태그를 선택하면, 원하는 피클을 골라낼 수 있다.
💡
코드
<div class="table">
	<bento>
		<orange />
	</bento>
		<plate id="fancy">
			<pickle />
		</plate>
		<plate>
			<pickle />
		</plate>
</div>
#fancy pickle /*fancy id에 소속된 pickle 태그를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 6 (class)

class 선택자와 관련 된 문제이다. 태그, id 선택자와 함께 가장 기본적인 선택자이다.
.을 사용한다는 사실을 명심하자
class는 동일한 이름을 여러번 부여할 수 있다! → 여러 요소에 동일한 속성 부여 가능
solution
💡
코드
<div class="table">
	<apple />
	<apple class="small" />
	<plate>
		<apple class="small" />
	</plate>
	<plate />
</div>
.small/*small class를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 7 (tag + class)

small class 만 선택하자고 하니, <apple class="small" /> 까지 선택되는 문제가 있다.
띄어쓰기를 조심하자! CSS에서 잘못된 띄어쓰기는 전혀 다른 결과를 불러올 수 있다. 4번 문제 같은 경우가 아니면, 붙여 쓰기를 지향하자.
solution
orange.small 띄어쓰기를 하지 않음에 유의하자.
💡
코드
<div class="table">
	<apple />
	<apple class="small" />
	<bento>
		<orange class="small" />
	</bento>
	<plate>
		<orange />
	</plate>
	<plate>
		<orange class="small" />
	</plate>
</div>
orange.small/*orange태그에 소속된 small 클래스를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 8 (응용)

You can do it...
solution
<apple class="small" /> 을 피하기 위해 orange.small 을 사용할려 하니 <bento> 태그 밖에 있는 <orange class="small" /> 요소가 있다. 그러므로 <bento> 태그 내부에 있는 small 클래스를 선택하는 선택자를 작성하자.
💡
코드
<div class="table">
	<bento>
		<orange />
	</bento>
	<orange class="small" />
	<bento>
		<orange class="small" />
	</bento>
	<bento>
		<apple class="small" />
	</bento>
	<bento>
		<orange class="small" />
	</bento>
</div>
bento orange.small
/*bento 태그 내부에 있는 oragne 태그의 small class를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
notion image

다중 선택자

Level 9 (,)

여러 개의 선택자를 동시에 선택하고 싶다면 ,를 사용하면 된다!
solution
<plate>와 <bento>내부에 있는 <pickle>모두를 동시에 선택하기 위해서 ,를 사용하면 된다.
💡
코드
<div class="table">
	<pickle class="small" />
	<pickle />
	<plate>
		<pickle />
	</plate>
	<bento>
		<pickle />
	</bento>
	<plate>
		<pickle />
	</plate>
	<pickle />
	<pickle class="small" />
</div>
plate, bento
/*plate 태그와 bento 태그를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 10~11 (*)

모든 태그를 선택하고 싶다면 * 를 이용하면 된다!
p * 는 <p> 요소 안의 모든 요소를 선택합니다.

10 solution

<plate>와 <bento>내부에 있는 <pickle>모두를 동시에 선택하기 위해서 ,를 사용하면 된다.
💡
코드
<div class="table">
	<something...>
</div>
*
/*전부 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
*태그 응용 문제이다. 위 각주를 참고해 보자.

11 solution

<plate>내부의 모든 요소를 가져온다. <plate>까지 가져오는게 아니다!
💡
코드
<div class="table">
	<plate id="fancy">
		<orange class="small" />
	</plate>
	<plate>
		<pickle />
	</plate>
	<apple class="small" />
	<plate>
		<apple />
	</plate>
</div>
plate *
/*plate 태그 내부 요소를 전부 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/

Level 12 (+)

+ 의 경우 요소 바로 다음에 오는 요소를 선택한다는 의미이다. 와 는 동등한 위치에 있다는 걸 명심하자.
solution
<plate>와 <bento>내부에 있는 <pickle>모두를 동시에 선택하기 위해서 ,를 사용하면 된다.
💡
코드
<div class="table">
	<bento>
		<apple class="small" />
	</bento>
	<plate />
	<apple class="small" />
	<plate />
	<apple />
	<apple class="small" />
	<apple class="small" />
</div>
plate + apple
/*plate 태그 바로 다음에 오는 apple 태그를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 13 (~)

~ 의 경우 요소 다음에 오는 모든 요소를 선택한다는 의미이다. +와 차이는 뒤에 오는 모든~ 요소를 선택한다는 것이다. 이 또한, 와 는 동등한 위치에 있다는 걸 명심하자.
solution
<plate>와 <bento>내부에 있는 <pickle>모두를 동시에 선택하기 위해서 ,를 사용하면 된다.
💡
코드
<div class="table">
	<pickle />
	<bento>
		<orange class="small" />
	</bento>
	<pickle class="small" />
	<pickle />
	<plate>
		<pickle />
	</plate>
	<plate>
		<pickle class="small" />
	</plate>
</div>
bento ~ pickle
/*bento 태그 다음에 오는 모든 pcikle 태그를 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 14 (>)

> 의 경우 요소 다음에 오는 모든 자식 요소 를 선택한다는 의미이다. + ~와 차이는 바로 해당되는 모든 자식 요소를 선택한다는 것이다. 는 의 자식 요소임을 명심하자.
solution
💡
코드
<div class="table">
	<bento />
	<plate />
	<plate>
		<orange />
		<orange />
		<orange />
	</plate>
	<pickle class="small" />
</div>
plate > apple
/*plate 태그의 자식 요소로 있는 apple 태그 선택*/
{
	
}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
notion image

Child 선택자

Level 15 (:first-child)

:first-child의 경우 요소가 그 부모의 첫 번째 자식일 때 선택 된다. 가 부모를 의미하는 게 아니라 의 부모에서 의미를 찾는 것임을 명심하자.
가 명시되지 않으면, 모든 요소를 의미한다.(16번 참고)
solution
💡
코드
<div class="table">
	<bento />
	<plate />
	<plate>
		<orange />
		<orange />
		<orange />
	</plate>
	<pickle class="small" />
</div>
orange:first-child
/*oragne 태그 중에서 부모 요소의 처음으로 오는 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 16 (:only-child)

:only-child의 경우 요소가 그 부모의 유일한 자식일 때 선택 된다. 즉, 요소만이 부모 요소의 자식인 경우에만 적용된다.
가 명시되지 않으면, 모든 요소를 의미한다.
solution
💡
코드
<div class="table">
	<plate>
		<apple />
	</plate>
	<plate>
		<pickle />
	</plate>
	<bento>
		<pickle />
	</bento>
	<plate>
		<orange class="small" />
		<orange />
	</plate>
	<pickle class="small" />
</div>
plate > :only-child
/*plate 태그 내에서 자식 요소가 하나인 모든 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
or
apple:only-child, plate pickle:only-child
/*모든 apple태그 에서 부모의 유일한 자식인 apple 태그 선택*/
/*playe 태그 내의 pickle 태그에서 부모의 유일한 자식인 apple 태그 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 17 (:last-child)

:last-child의 경우 요소가 그 부모의 마지막 자식일 때 선택 된다.
한 요소가 부모 요소의 유일한 자식인 경우, 그 요소는 :first-child, :only-child, :last-child로 간주된다.
가 부모를 의미하는 게 아니라 의 부모에서 의미를 찾는 것임을 명심하자.
solution
<orange class="small" />의 경우, 부모 요소의 첫 번째 요소로 왔기 때문에 선택되지 않는다.
💡
코드
<div class="table">
	<plate id="fancy">
		<apple class="small" />
	</plate>
	<plate />
	<plate>
		<orange class="small" />
		<orange />
	</plate>
	<pickle class="small" />
</div>
.samll:last-child
/*.small 클래스 중에서 부모 요소의 마지막으로 오는 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 18 (:nth-child(n))

:nth-child()의 경우 요소가 그 부모의 번째 자식일 때 선택 된다.
가 명시되지 않으면, 모든 요소를 의미한다.
💡
␣:nth-child() 와 같이 공백을 두고 입력하면 요소 하위 항목 번째 요소를 선택한다는 의미가 된다!
이 odd면 홀수 번째, even이면 짝수 번째의 모든 요소가 적용된다.
solution
💡
코드
<div class="table">
	<plate />
	<plate />
	<plate />
	<plate id="fancy" />
</div>
plate:nth-child(3)
/*plate 태그 중에서 부모 요소의 앞에서 3번째로 오는 plate 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/

Level 19 (:nth-last-child(n))

:nth-child()의 경우 요소가 그 부모의 뒤에서 번째 자식일 때 선택 된다.
solution
nth-child를 원한다면 안타깝게도 풀 수 없다. 문제 풀이 환경상 table 클래스에 접근이 불가해 전역적으로 :nth-child(2)밖에 사용이 안되는데, orange 요소까지 선택되기 때문에 풀이가 불가하다.
💡
코드
<div class="table">
	<plate />
	<bento />
	<plate>
		<orange />
		<orange />
		<orange />
	</plate>
	<bento />
</div>
bento:nth-last-child(3)
/*뒤에서 3번째로 오는 요소가 bento 태그이면 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
notion image

Type 선택자

Level 20 (:first-of-type)

:first-of-type : 요소 중 첫 요소를 선택
solution
💡
코드
<div class="table">
	<orange class="small" />
	<apple />
	<apple class="small" />
	<apple />
	<apple class="small" />
	<plate>
		<orange class="small" />
		<orange />
	</plate>
</div>
apple:first-of-type
/*apple 태그 중에서 첫 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
 

Level 21~22 (:nth-of-type(n) + even, odd, sequence)

:first-of-type() : 요소 중 번째 요소를 선택
이 odd면 홀수 번째, even이면 짝수 번째의 모든 요소가 적용된다.

21 solution

💡
코드
<div class="table">
	<plate />
	<plate />
	<plate />
	<plate />
	<plate id="fancy" />
	<plate />
</div>
plate:nth-of-type(even)
/*plate 태그 중에서 짝수 번째로 오는 모든 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
2n+3과 같이 수열을 만든다면, 그 수열에 맞게 선택이 된다.

22 solution

💡
코드
<div class="table">
	<plate />
	<plate>
		<pickle class="small" />
	</plate>
	<plate>
		<apple class="small" />
	</plate>
	<plate />
	<plate>
		<apple />
	</plate>
	<plate />
</div>
plate:nth-of-type(2n + 3)
/*plate 태그 내에서 3번째 부터 2개 간격으로 plate 태그를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
 

Level 23 (:only-of-type)

:only-of-type : 부모 요소 내부에서 요소가 유일하다면, 그 요소를 선택한다.
solution
💡
코드
<div class="table">
		<plate id="fancy">
			<apple class="small" />
			<apple />
		</plate>
	<plate>
		<apple class="small" />
	</plate>
	<plate>
		<pickle />
	</plate>
</div>
plate apple:only-of-type
/*plate 태그 내에서 같은 요소가 없는 apple 태그를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 24 (:last-of-type)

:last-of-type : 요소 중 마지막 요소를 선택
solution
💡
코드
<div class="table">
	<orange class="small" />
	<orange class="small" />
	<pickle />
	<pickle />
	<apple class="small" />
	<apple class="small" />
</div>
.small:last-of-type
/*small 클래스중 마지막으로 오는 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
notion image

Empty, not 선택자

Level 25 (:empty)

:empty : 자식 요소가 없는 요소를 선택한다.
solution
💡
코드
<div class="table">
	<bento />
	<bento>
		<pickle class="small" />
	</bento>
	<plate />
	<bento />
</div>
bento:empty
/*자식이 없는 모든 bento 요소를 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 26 (:not(X))

:not() : 요소 중 요소가 없을 경우 선택된다.
당연하지만, 로도 처럼 :first-child, .big, .medium와 같은 다양한 선택자가 올 수 있다.
solution
💡
코드
<div class="table">
	<plate id="fancy">
		<apple class="small" />
	</plate>
	<plate>
		<apple />
	</plate>
	<apple />
	<plate>
		<orange class="small" />
	</plate>
	<pickle class="small" />
</div>
apple:not(.small)
/*samll 클래스 속성이 없는 모든 apple 태그 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
notion image

Attribute 선택자

Level 27~29 ([])

[] : 속성을 가진 모든 요소 선택

27 solution

💡
코드
<div class="table">
	<bento>
		<apple class="small" />
	</bento>
	<apple for="Ethan" />
	<plate for="Alice">
		<pickle />
	</plate>
	<bento for="Clara">
		<orange />
	</bento>
	<pickle />
</div>
[for]
/*for 속성을 가진 모든 요소 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
[] : 요소 중속성을 가진 모든 요소 선택

28 solution

💡
코드
<div class="table">
	<plate for="Sarah">
		<pickle />
	</plate>
	<plate for="Luke">
		<apple />
	</plate>
	<plate />
	<bento for="Steve">
		<orange />
	</bento>
</div>
plate[for]
/*plate 태그 중 for 속성을 가진 모든 요소 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
[=”value”] 속성의 값이 value인 모든 태그 선택

29 solution

💡
코드
<div class="table">
	<apple for="Alexei" />
	<bento for="Albina">
		<apple />
	</bento>
	<bento for="Vitaly">
		<orange />
	</bento>
	<pickle />
</div>
[for="Vitaly"]
/*for 속성 중 값이 "Vitaly"인 모든 요소 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 

Level 30~32 (^, $, *)

[^=”value”] 속성의 값이 value로 시작하는 모든 태그 선택

30 solution

💡
코드
<div class="table">
	<plate for="Sam">
		<pickle />
	</plate>
	<bento for="Sarah">
		<apple class="small" />
	</bento>
	<bento for="Mary">
		<orange />
	</bento>
</div>
[for^="Sa"]
/*for 속성 중 값이 "Sa"로 시작하는 모든 요소 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
[$=”value”] 속성의 값이 value로 끝나는 모든 태그 선택
img[src$=".jpg"] 이와 같이 응용이 가능하다.

31 solution

💡
코드
<div class="table">
	<apple class="small" />
	<bento for="Hayato">
		<pickle />
	</bento>
	<apple for="Ryota" />
	<plate for="Minato">
		<orange />
	</plate>
	<pickle class="small" />
</div>
[for$="to"]
/*for 속성 중 값이 "to"로 끝나는 모든 요소 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
 
 
[*=”value”] 속성의 값에 value가 존재하는 모든 태그 선택
[class*="heading"]와 같이 정의를 한다면, class="main-heading", class="sub-heading"에 동일한 설정을 손쉽게 정의할 수 있다.

32 solution

💡
코드
<div class="table">
	<bento for="Robbie">
		<apple />
	</bento>
	<bento for="Timmy">
		<pickle />
	</bento>
	<bento for="Bobby">
		<orange />
	</bento>
</div>
[for*="bb"]
/*for 속성 중 값에 "bb"가 들어간ㅁ 모든 요소 선택*/
{

}

/*
	Type a number to skip to a level.
	Ex → "5" for level 5
*/
notion image
 

수고하셨습니다!

notion image
참고문헌