css diner 주소
-
select the plates
plate -
select the bento boxes
bento -
select the fancy plate
#fancy -
select the apple on the plate
plate apple -
select the pickle on the fancy plate
#fancy pickle -
Select the small apples
.small -
Select the small oranges
orange.small -
Select the small oranges in the bentos
bento orange.small -
Select all the plates and bentos
plate, bento -
Select all the things!
* -
Select everything on a plate
plate *=> 띄어쓰기 중요함 -
Select every apple that's next to a plate
plate + apple -
Select the pickles beside the bento
bento ~ pickle -
Select the apple directly on a plate
plate>apple -
Select the top orange
plate :first-child -
Select the apple and the pickle on the plates
plate :only-child -
Select the small apple and the pickle
:last-child.small -
Select the 3rd plate
:nth-child(3) -
Select the 1st bento
bento:nth-last-child(3) -
Select first apple
apple:first-of-type -
Select all even plates
:nth-of-type(even) -
Select every 2nd plate, starting from the 3rd
:nth-of-type(2n+3) -
Select the apple on the middle plate
:only-of-type.small -
Select the last apple and orange
:last-of-type.small -
Select the empty bentos
bento:empty -
Select the big apples
apple:not(.small)
:not(.small,plate)
두가지 다 답이 가능함. -
Select the items for someone
[for] -
Select the plates for someone
plate[for] -
Select Vitaly's meal
[for="Vitaly"]=> 첫글자 소문자X. 문자열로 받으니까 문자열이 전부 맞아야 함. -
Select the items for names that start with 'Sa'
[for^="Sa"]=> 마찬가지로 첫글자 대문자. -
Select the items for names that end with 'ato'
[for$="ato"] -
Select the meals for names that contain 'obb'
[for*="obb"]
참고!
이건 비단 CSS에서만 적용되는 문법이 아니니까 외워두면 좋다!
^ : 시작을 나타냄
$ : 끝을 나타냄
* : 전체를 나타냄
0개의 댓글
