1.Select the plate
plate
:plate 태그를 모두 선택
2.Select the bento boxes
bento
:bento 태그를 모두 선택
3.Select the fancy plate
#fancy
:fancy ID를 모두 선택(ID선택자)
4.Select the apple on the plate
plate apple plate > apple plate>apple
:plate를 부모로 가지는 apple을 모두 선택
5.Select the pickle on the fancy
#fancy pickle #fancy > pickle #fancy>pickle
:fancy ID를 부모로 가지는 pickle을 모두 선택
6.Select the small apples
.small
:small class를 모두 선택(class 선택자)
7.Select the small oranges
orange.small
:orange 태그를 가지면서 small 클래스를 가지는 요소를 모두 선택
8.Select the small oranges in the bentos
bento orange.small
:bento가 부모이면서 orange 태그와 small 클래스를 동시에 가지는 요소를 모두 선택
9.Select all the plates and bentos
plate, bento
:plate와 bento 태그를 모두 선택
10.Select all the things
*
:모두 선택
11.Select everything on a plate
plate * plate > * plate>*
:plate의 자식을 모두 선택
12.Select every apple that's nest to a plate(check)
plate + apple
:plate 태그 바로 다음에 나오는 apple 태그를 모두 선택
They're on the same level, or depth
(단, 두 element는 같은 level과 depth를 가져야 함)
13.Select the pickles beside the bento
bento ~ pickle
:bento 이후로 존재하는 pickle 태그를 모두 선택.
(A ~ B selects all B that follow a A)
연속하지 않아도 되고, 이후에 나오는 모든 sibling 요소를 포함한다.
14.Select the apple directly on a plate
plate > apple
:plate를 direct 부모로 가지는 apple 태그를 모두 선택
(A > B selects all B that are a direct children A)
15.Select the top orange
orange:first-child
:nesting 되어있는 첫번째 orange를 선택
(:first-child selects all first child elements.)
(p:first-child selects all first child p elements.)
(div p:first-child selects all first child p elements that are in a div.)
16.Select the apple and the pickle on the plates
plate :only-child
:plate를 부모로 가지고 plate 속에 하나밖에 없는 요소를 모두 선택.
(You can select any element that is the only element inside of another one.)
(apple:only-child라고 하면 only-child인 apple을 모두 선택. 빈칸 주의!)
(span:only-child selects the span elements that are the only child of some other element.)
(ul li:only-child selects the only li element that are in a ul.)
17.Select the small apple and the pickle
.small:last-child
:small ID를 가지면서 last-child인 요소를 모두 선택
18.Select the 3rd plate
plate:nth-child(3)
:3번째이면서 plate인 요소를 선택
(3번째 plate를 선택하는것이 아닌. 만약 plate, plate, bento, plate가 있다면 plate:nth-child(3)를 해도 아무것도 선택되지 않는다.
plate:nth-child(4)를 해야 마지막 plate가 선택된다.)
19.Select the 1st bento
bento:nth-last-child(3)
:마지막에서 3번째이면서 bento인 요소를 선택
(:nth-last-child(2) selects all second-to-last child elements.)
20.Select first apple
apple:first-of-type
:첫번째 apple 태그를 선택
21.Select all even plates
plate:nth-of-type(even)
:plate중 짝수번째 plate를 모두 선택
(nth-child와는 다르게 plate중에서만 선택한다.
만약 plate, plate, bento, plate가 있고 plate:nth-of-type(odd)를 한다면 1,4번째 plate가 선택된다. plate 중에서는 1,3번째이므로 마지막 plate가 선택 된다.)
(.example:nth-of-type(odd) selects all odd instances of a the example class.)
22.Select every 2nd plate, starting from the 3rd
plate:nth-of-type(2n+3)
:3번째부터 every 2nd plate를 모두 선택
(:nth-of-type(An+B) B는 어디서부터 선택할지의 숫자 A는 An의 조건에 맞는 태그 선택)
23.Select the apple on the middle plate
plate apple:only-of-type .small:only-of-type
:plate 태그 내에 유일한 apple 태그를 선택
(class가 small인 유일한 태그 선택)
24.Select the last apple and orange
.small:last-of-type
:small 클래스를 가지면서 가장 마지막 요소들을 모두 선택
(p span:last-of-type selects the last <span> in every <p>.)
25.Select the empty bentos
bento:empty
:자식 요소가 없는 bento를 모두 선택 // empty = 비여있는
26.Select the big apples
apple:not(.small) :not(#fancy, .small, plate)
:small 클래스가 아닌 사과를 모두 선택
:ID가 fancy, class가 small, 태그가 plate가 아닌 모두 선택
27.Select the items for someone
[for]
: for 특성을 가진 요소를 모두 선택
([value] selects all elements that have a value="anything" attribute.
a[href] selects all a elements that have a href="anything" attribute.
input[disabled] selects all input elements with the disabled attribute)
28.Select the plates for someone
plate[for]
: for 특성을 가진 plate 태그를 모두 선택
29,Selsect Vitaly's meal
[for="Vitaly"]
: Vitaly라는 value의 for 특성을 가진 태그를 모두 선택
30.Select the items for names that start with 'Sa'
[for^="Sa"]
: Sa로 시작하는 value의 for 특성을 가진 태그를 모두 선택
31.Select the items for names that end with 'ato'
[for$="ato"]
: ato로 끝나는 value의 for 특성을 가진 태그를 모두 선택
32.Select the meals for names that contain ''obb'
[for*="obb"] bento[for*='bb']
:obb가 포함된 value의 for 특성을 가진 태그를 모두 선택
