TIL | CSS Diner

本TILは答えと解説を理解するためだけに書かれています.
次のリンクをクリックして問題を表示
https://sinseiki.github.io/cssdiner/
また、これらの問題が単純すぎるか、新しい選択者の使用方法がない場合は、これらの問題をスキップします.

#fancy plate

<plate id="fancy/">

id値がfanctionのplateであるため、CSSはidの前に「#」を付ける.
だから派手なお皿を選びました

#fancy pickle

<plate id="fancy">
	<pickle />
</plate>

花皿のキムチを選ばなければならないからです.
花の漬け物です.
6. .small

<apple />
<apple class="small" />
<plate>
	<apple class="small" />
</plate>
<plate />

小さいリンゴの問題を選ぶのですまずclassはCSSの中で句点を使用します.

bento orange.small
bentoの中の小さいみかんを選ぶ

<bento>
<orange class="small" />
</bento>
<bento>
<apple class="small" />
</bento>
<bento>
<orange class="small" />
</bento>

CSSからすべてを選択するために*(アステリーク)を使用します.

plate *
上記のコマンドを使用してplateのすべての内容を選択します.
ラベルとアステリックの間を隔てて書くのを忘れないでください.

plate + apple
plateの後ろに続くりんごを選ぶのに使います.
エレメントの直後にあるエレメントを選択します.
隣接する兄弟選択子+(プラス記号)を使用することを忘れないでください.

bento ~ pickle
bentoの後ろにあるpickleを選択します.
+(プラス記号)との違いは~(tild,波号)と+の違いは,1つだけ選択することである.
次のすべての要素を選択します.

<div class="table">
  <pickle />
  <bento>
    <orange class="small" />
  </bento>
  <pickle class="small" />		<--선택
  <pickle />					<--선택
  <plate>
    <pickle />
  </plate>
  <plate>
    <pickle class="small" />
  </plate>
</div>

plate > apple
親要素(plate)のサブ要素(apple)を選択します.

<plate>
	<apple />	<--선택
</plate>

orange:first-child
:first-schildは、最初のタグをすべて選択できます.
特定のラベルの後にfirst-childを付けると、特定のラベルの最初のラベルしか選択できません.

plate *:only-child
:only-schildは、ある要素に独自に存在する要素を選択します.

.small:last-child
:last-childは、最後の要素を選択するために使用されます.
クラス名のshortという食べ物の中で、最後の要素を選んで書けばいいのです.

<div class="table">
  <plate id="fancy">
    <apple class="small" />		<--선택
  </plate>
  <plate />
  <plate>
    <orange class="small" />	<--마지막 요소가 아니기 때문에 선택X
  <orange />
  </plate>
  <pickle class="small" />		<--선택
</div>

plate:nth-child(3)
書き込みは3番目のplateを選択します.
n n番目のplate:nth-child(n)

を選択

<div class="table">
  <plate />
  <plate />
  <plate />		<--선택
  <plate id="fancy" />
</div>

bento:nth-last-child(3)
nth-childと似ていますが、逆順序で検索するために使用されます.

apple:first-of-type
:first-of-typeは、特定のタグの最初の要素を選択するために使用されます.

plate:nth-of-type(even)
:nth-of-type(偶数)特定のタグの偶数要素を選択します.
:n回-of-type(odd)は奇数です.

plate:nth-of-type(2n+3)
3番目の特定のラベルから2 n番目のplateを選択するために使用します.
後ろに書いてある数字は、何番目からカウントダウンを開始するキャラクターです

<div class="table">
  <plate />
  <plate>
    <pickle class="small" />
  </plate>
  <plate>
    <apple class="small" />		<--선택
  </plate>
  <plate />
  <plate>
    <apple />					<--선택
  </plate>
  <plate />
</div>

apple:only-of-type
:only-of-typeは、特定のタグが1つしかない要素を選択します.

orange:last-of-type, apple:last-of-type
:last-of-typeは、特定のタグの最後の要素のみを選択するために使用されます.

<div class="table">
  <orange class="small" />
  <orange class="small" />		<--선택
  <pickle />
  <pickle />
  <apple class="small" />
  <apple class="small" />		<--선택
</div>

bento:empty
:空は、サブ要素を含まない要素を選択するために使用されます.

apple:not(.small)
:no(n)は、n以外の要素を選択するために使用されます.

  <div class="table">
  <plate id="fancy">
    <apple class="small" />
  </plate>
  <plate>
    <apple />					<--선택
  </plate>
  <apple />						<--선택
  <plate>
    <orange class="small" />
  </plate>
  <pickle class="small" />
  </div>

[for]
特定の属性を持つ要素を選択する場合は、「属性」という方法で記述できます.
例:
div[プロパティ]divタグからプロパティ値を持つ要素を選択します.

plate[for]
plateラベルでは、forプロパティを持つラベルのみを選択します.

<div class="table">
  <plate for="Sarah">
    <pickle />			<--선택
  </plate>
  <plate for="Luke">
    <apple />			<--선택
  </plate>
  <plate />
  <bento for="Steve">
    <orange />
  </bento>
</div>

[for=Vitaly]
特定の属性値を持つ要素を選択します.質問を参照してください.

<div class="table">
  <apple for="Alexei" />
  <bento for="Albina">
    <apple />
  </bento>
  <bento for="Vitaly">
    <orange />			<--선택
  </bento>
  <pickle />
</div>

[for^="Sa"]
CSSでは正規表現のような機能を持つ特殊な記号として使用されます.
^:開始を指す文字
$:終了文字

:含む特定の文字を指す

<div class="table">
  <plate for="Sam">
    <pickle />					<--선택
  </plate>
  <bento for="Sarah">
    <apple class="small" />		<--선택
  </bento>
  <bento for="Mary">
    <orange />
  </bento>
</div>

SamとSarahは「Sa」で始まるので、上記の2つのオプションを選択します.
大文字と小文字を区別する.

[for$="ato"]

<div class="table">
  <apple class="small" />
  <bento for="Hayato">
    <pickle />				<--선택
  </bento>
  <apple for="Ryota" />
  <plate for="Minato">
    <orange />				<--선택
  </plate>
  <pickle class="small" />
</div>

HayatoとMinatoは「ato」で終わるので上のように2つ選びます

[for*="obb"]

<div class="table">
  <bento for="Robbie">
    <apple />			<--선택
  </bento>
  <bento for="Timmy">
    <pickle />
  </bento>
  <bento for="Bobby">
    <orange />			<--선택
  </bento>
</div>

RobbieとBobbyには「obb」が含まれているので、上記のように2つを選択します.
ここまでやればCSS博士(?)肩書きを取得できます...