[추가] CSS Diner

관련 출처 :

• CSS Diner
• [GitHubGist] CSS Diner Solutions

CSS Diner의 몇가지 선택자의 정의와 답을 옮겨 적었다.

각 문제에 대한 정확한 정답은 아래의 링크에서 확인이 가능하다.

[GitHubGist] CSS Diner Solutions

Level 12 : Adjacent Sibling Selector

Select an element that directly follows another element A + B

This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth. 

Level 13 : General Sibling Selector

Select elements that follows another element A ~ B

You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one.

Level 15 : First Child Pseudo-selector

Select a first child element inside of another element :first-child

You can select the first child element. A child element is any element that is directly nested in another element. You can combine this pseudo-selector with other selectors.

[My Answer] plate > orange:first-child

Level 16 : Only Child Pseudo-selector

Select an element that are the only element inside of another one. :only-child

You can select any element that is the only element inside of another one.

Level 17 : Last Child Pseudo-selector

Select the last element inside of another element :last-child

You can use this selector to select an element that is the last child element inside of another element. 

(Pro Tip. In cases where there is only one element, that element counts as the first-child, only-child and last-child!)

Level 18 : Nth Child Pseudo-selector

Select an element by its order in another element :nth-child(A)

Selects the nth (Ex: 1st, 3rd, 12th etc.) child element in another element.

Level 19 : Nth Last Child Selector

Select an element by its order in another element, counting from the back :nth-last-child(A)

Selects the children from the bottom of the parent. This is like nth-child, but counting from the back!

Level 20 : First of Type Selector

Select the first element of a specific type :first-of-type

Selects the first element of that type within another element.

Level 21 : Nth of Type Selector

:nth-of-type(A)

Selects a specific element based on its type and order in another element - or even or odd instances of that element.

.example:nth-of-type(odd)

Level 22 : Nth-of-type Selector with Formula

:nth-o-type(An+B)

The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

Level 23 : Only of Type Selector

Select elements that are the only ones of their type within of their parent element :only-of-type

Selects the only element of its type within another element.

Level 24 : Last of Type Selector

Select the last element of a specific type :last-of-type

Selects each last element of that type within another element. Remember type refers the kind of tag, so p and span are different types. 

Level 25 : Empty Selector

Select elements that don't have children :empty

Selects elements that don't have any other elements inside of them.

[My Answer] bento:empty

Level26 : Negation Pseudo-class

Select all elements that don't match the negation selector :not(X)

You can use this to select all elements that do not match selector "X".

[My Answer] apple:not(.small)

Level 27 : Attribute Selector

Select all elements that have a specific attribute [attribute]

Attributes appear inside the opening tag of an element, like this: span attribute="value". An attribute does not always have a value, it can be blank!

[My Answer] apple[for],plate[for],bento[for]

Level 28 : Attribute Selector

Select all elements that have a specific attribute A[attribute]

Combine the attribute selector with another selector (like the tag name selector) by adding it to the end.

[My Answer] plate[for]

Level 29 : Attribute Value Selector

Select all elements that have a specific attribute value [attribute="value"]

Attribute selectors are case sensitive, each character must match exactly.

[My Answer] bento[for="Vitaly"]

Level 30 : Attribute Starts With Selector

Select all elements with an attribute value that starts with specific characters [attribute^="value"]

[My Answer] [for^="S"]

Level 31 : Attribute Ends With Selector

Select all elements with an attribute value that ends with specific characters [attribute$="value"]

[My Answer] [for$="to"]

Level 32 : Attribute Wildcard Selector

Select all elements with an attribute value that contains specific characters anywhere [attribute*="value"]

A useful selector if you can identify a common pattern in things like class, href or src attributes.

[My Answer] [for*="obb"]