CSS Diner란?
CSS Selector들에 대해 쉽고 재밌게 배울 수 있는 게임이다.
정답이 꼭 한가지만은 아니여서, 자유롭게 생각할 수 있도록 잘 해놓은 것 같다.
단계별로 내용을 정리해보았다.
오른쪽 링크를 통해 플레이 할 수 있다.👉https://flukeout.github.io/
Level. 1 - 유형 선택자(Type Selector)
유형 선택자는 노드 이름을 사용해 요소를 선택한다. 문서 내에서 주어진 모든 유형의 모든 요소를 선택한다.
plate 유형의 모든 요소를 선택하고 있다.
plate
{
/* Styles would go here. */
}
Level. 2 - 유형 선택자(Type Selector) 2
bento 유형의 요소를 모두 선택하고 있다.
bento
{
/* Styles would go here. */
}
Level. 3 - 아이디 선택자(ID Selector)
ID 선택자는 id 이름을 사용해 요소를 선택한다. #를 사용해 문서 내에서 주어진 id 이름을 가진 요소를 선택한다. id 이름은 고유적으로만 가질 수 있는 값이기 때문에 단일 요소만 선택된다.
'fancy'라는 id를 가진 단일 요소만 선택하고 있다.
#fancy
{
/* Styles would go here. */
}
Level. 4 - 자손 선택자(Descendant Selector)
자손 요소중 특정 유형의 모든 요소를 선택한다.
'자식'이 아니라 '자손'을 선택함을 주의하자.
plate 유형의 모든 요소의 자손 중 모든 apple 유형의 선택자를 선택하고 있다.
plate apple
{
/* Styles would go here. */
}
Level. 5 - 자손 & 아이디 선택
ID 선택자의 특정 유형의 자식 요소를 모두 선택한다.
'fancy'라는 id를 가진 단일 유형의 자식 중 모든 pickle 유형의 선택자를 선택하고 있다.
#fancy pickle
{
/* Styles would go here. */
}
Level. 6 - 클래스 선택자(Class Selector)
Class 선택자는 특정 클래스를 가진 모든 요소를 선택한다.
'small'이라는 클래스를 가진 모든 요소를 선택하고 있다.
.small
{
/* Styles would go here. */
}
Level. 7 - 유형 & 클래스 선택
특정 유형의 모든 요소들 중에 특정 클래스를 가진 모든 요소를 선택한다.
orange 유형의 요소 중, 'small'클래스를 가진 모든 요소들을 선택한다.
orange.small
{
/* Styles would go here. */
}
Level. 8 - 테스트1
화면에서 bento 유형 요소의 자식 유형중 'small'이라는 클래스를 가진 orange 유형 요소들을 선택해야 한다.
bento orange.small
{
/* Styles would go here. */
}
Level. 9 - 다중 선택(Comma Combinator)
,를 사용하여 여러 선택자를 선택할 수 있다.
bento 유형과 plate 유형 둘 다 선택하고 있다.
bento, plate
{
/* Styles would go here. */
}
Level. 10 - 전체 선택자(The Universal Selector)
*를 사용하여 모든 요소를 선택할 수 있다.
모든 요소를 선택하고 있다.
*
{
/* Styles would go here. */
}
Level. 11 - 자손 & 전체 선택
자손 선택하는 방법과 별표를 사용해, 특정 요소의 모든 자손을 선택할 수 있다.
plate 유형 요소의 모든 자손을 선택하고 있다.
plate *
{
/* Styles would go here. */
}
Level. 12 - 인접 동생 선택자(Adjacent Sibling Selector)
+를 사용해 인접한 동생 요소를 선택할 수 있다.
plate 유형에 인접한 동생 apple 유형 요소를 선택하고 있다.
plate + apple
{
/* Styles would go here. */
}
Level. 13 - 일반 동생 선택자(General Sibling Selector)
~를 사용해 특정 유형의 모든 동생 요소를 선택할 수 있다.
bento 유형 요소의 동생 중 모든 pickle 유형 요소를 선택하고 있다.
bento ~ pickle
{
/* Styles would go here. */
}
Level. 14 - 인접 자식 선택자(Child Selector)
>를 사용해 인접한 자식 요소를 선택할수 있다.
plate 유형 요소의 인접한 자식 apple 유형 요소를 선택하고 있다.
plate > apple
{
/* Styles would go here. */
}
Level. 15 - 첫번째 자식 가상 선택자(First Child Pseudo-selector)
:first-child를 사용해 원하는 요소의 여러 자식 중 첫번째 자식을 선택한다.
plate 유형 요소 자식 중에 orange 유형 중 첫번째 자식 요소를 선택하고 있다.
plate orange:first-child
{
/* Styles would go here. */
}
Level. 16 - 단일 자식 가상 선택자(Only Child Pseudo-selector)
:only-child를 사용해 단일 자식으로(형제가 없이) 존재하는 요소를 선택할 수 있다.
plate 유형 요소 자식 중에 orange 유형 중 첫번째 자식 요소를 선택하고 있다.
plate > :only-child
{
/* Styles would go here. */
}
Level. 17 - 마지막 자식 가상 선택자(Last Child Pseudo-selector)
:last-child를 사용해 자식 요소 중 마지막 자식을 선택할 수 있다.
'small' 클래스를 가진 요소중에 마지막 자식인 요소만을 선택하고 있다.
.small:last-child
{
/* Styles would go here. */
}
Level. 18 - N번째 자식 가상 선택자(Nth Child Pseudo-selector)
nth-child(N)을 사용해 자식 요소 중 N번째 요소를 선택할 수 있다.
세번째 자식요소를 선택하고 있다.
:nth-child(3)
{
/* Styles would go here. */
}
Level. 19 - 마지막의 N번째 자식 선택자(Nth Last Child Selector)
:nth-last-child(N)을 사용해 자식 요소 중 마지막에서 N번째의 요소를 선택할 수 있다.
마지막에서 세번째 자식요소중 bento 유형의 요소를 선택하고 있다.
bento:nth-last-child(3)
{
/* Styles would go here. */
}
Level. 20 - 첫번째 유형 선택자(First of Type Selector)
:first-of-type을 사용해 특정 유형 중 첫번째 요소를 선택할 수 있다.
apple 유형의 첫번째 요소를 선택하고 있다.
apple:first-of-type
{
/* Styles would go here. */
}
Level. 21 - N번째 유형 선택자(Nth of Type Selector)
:nth-of-type(N)을 사용해 특정 유형 중 N번째 요소를 선택할 수 있다.
괄호 안에 odd나 even을 사용해서 홀수번째, 짝수번째에 있는 요소도 선택할 수 있다.
짝수번째 요소를 선택하고 있다.
:nth-of-type(even)
{
/* Styles would go here. */
}
Level. 22 - N번째 유형 선택자 2
:nth-of-type(An+B)처럼 괄호안에 일차 함수 패턴을 넣을 수 있다.
전체에서 B번째부터 시작해 A번째 반복되는 요소들을 선택하겠다는 의미이다.
3번째부터 시작해 2번째 반복되는 요소를 선택하고 있다.
:nth-of-type(2n+3)
{
/* Styles would go here. */
}
Level. 23 - 유형 단일 요소 선택자(Only of Type Selector)
:only-of-type을 사용해 각 유형에 대해 자식으로서 단일로 존재하는(형제가 없는) 요소를 선택할 수 있다.
자식으로서 단일로 존재하는 apple 유형을 선택하고 있다.
apple:only-of-type
{
/* Styles would go here. */
}
Level. 24 - 유형 마지막 요소 유형 선택자(Last of Type Selector)
:last-of-type을 사용해 각 유형에 대해 마지막 요소로서 존재하는 요소들을 선택할 수 있다.
'small' 클래스를 가진 각 유형에 대해 마지막 요소들을 선택하고 있다.
.small:last-of-type
{
/* Styles would go here. */
}
Level. 25 - 비어있는 선택자(Empty Selector)
:empty을 사용해 각 유형에 대해 자식요소없이 비어있는 요소를 선택할 수 있다.
bento 유형 중 비어있는 요소를 선택하고 있다.
bento:empty
{
/* Styles would go here. */
}
Level. 26 - 부정 가상 클래스(Negation Pseudo-class)
:not(A)을 사용해 원하는 조건을 배제한 모든 요소를 선택할 수 있다.
'small' 클래스를 가진 요소를 제외한 apple 유형의 요소를 선택하고 있다.
apple:not(.small)
{
/* Styles would go here. */
}
Level. 27 - 속성 선택자(Attribute Selector)
[arrtibute]을 사용해 특정 속성을 가진 모든 요소를 선택할 수 있다.
for 속성을 가진 모든 요소를 선택하고 있다.
[for]
{
/* Styles would go here. */
}
Level. 28 - 속성 선택자 2
A[arrtibute]을 사용해 특정 속성을 가진 유형을 모두 선택할 수 있다.
for 속성을 가진 plate 유형의 요소를 선택하고 있다.
plate[for]
{
/* Styles would go here. */
}
Level. 29 - 속성값 선택자
[attribute="value"]을 사용해 특정 속성값을 가진 모든 요소를 선택할 수 있다.
for속성의 "Vitaly"를 속성값으로 가진 모든 요소를 선택하고 있다.
[for="Vitaly"]
{
/* Styles would go here. */
}
Level. 30 - 시작 속성값 선택자(Attribute Starts With Selector)
[attribute^="value"]을 사용해 특정 속성값이 주어진 값으로 시작하는 모든 요소를 선택할 수 있다.
for속성에서 "S"로 시작하는 속성값을 가진 요소를 모두 선택하고 있다.
[for^="S"]
{
/* Styles would go here. */
}
Level. 31 - 끝 속성값 선택자(Attribute Ends With Selector)
[attribute$="value"]을 사용해 특정 속성값이 주어진 값으로 끝나는 모든 요소를 선택할 수 있다.
for속성에서 "to"로 끝나는 속성값을 가진 요소를 모두 선택하고 있다.
[for$="to"]
{
/* Styles would go here. */
}
Level. 32 - 포함 속성값 선택자(Attribute Wildcard Selector)
[attribute*="value"]을 사용해 특정 속성값에 주어진 값이 포함된 모든 요소를 선택할 수 있다.
for속성에서 "bb"가 포함된 속성값을 가진 요소를 모두 선택하고 있다.
[for*="bb"]
{
/* Styles would go here. */
}
