SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.07.18
  • CATEGORY
TITLE

【CSS】構造擬似クラス:only-child、:only-of-typeの使い方

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】構造擬似クラス:only-child、:only-of-typeの使い方
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • :only-child、:only-of-typeの使い方について学びたい方へ
  • 今回は構造擬似クラスを学習しよう

only-childonly-of-typeについての解説になります。
この2つの擬似クラスの共通点は「子要素が1つだけ」の時にCSSが適用されます。

構造擬似クラス

構造擬似クラス

今回は構造擬似クラスの:only-child、:only-of-typeについての解説記事なります。
書き方は以下のようになります。

/*--only-child--*/
要素:only-child {プロパティ: 値;}

/*--only-of-type--*/
要素:only-of-type {プロパティ: 値;}
指定できる値
  • only-child
    子要素が1つだけの時に指定します。
  • only-of-type
    要素の種類に関係なく、
    指定した子要素が1つだけの時に指定します。

構造擬似クラス:only-childについて

構造擬似クラス:only-childについて

:only-childとは、セレクタで指定した子要素が1つだけの時にスタイルが適用されます。

今回は、段落タグであるp要素を2つ用意し、
1つ目の段落には、strongタグを1つだけ使用しております。
2つ目の段落には、strongタグを2つ使用しております。

こよのうに、only-childとは子要素が1つだけの場合に適用されるため、「1つ目の段落(pのstrong)」のみに、CSSが適用されます。

only-childの場合

黄色とは、はつらつ・陽気・活気・希望・愉快・注意 など

光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。
元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。

<p><strong>黄色</strong>とは、はつらつ・陽気・活気・希望・愉快・注意 など</p>

<p><strong>光や輝きを連想させ、明るく、ユーモア</strong>を感じさせる快活な色味を表します。
<strong>元気を与える、注意を促す、集中力を上げるなどの心理効果</strong>を持っています。</p>
p strong:only-child {
	color: yellow;
}

構造擬似クラス:only-of-typeについて

構造擬似クラス:only-of-typeについて

:only-of-typeとは、セレクタで指定した子要素が、要素の種類に関係なく1つだけの時にスタイルが
適用されます。

今回は、div要素を2つ用意し、
1つ目の要素には、見出し(h3)と段落(p)を1つずつ使用しております。
2つ目の要素には、段落(p)を2つ使用しております。

こよのうに、1つ目の要素の中には見出し(h3)も含まれていますが、段落(p)は1つしかないため、CSSが適用されます。
2つ目の要素の中には段落(p)が2つあるため、CSSが適用されません。

only-of-typeの場合

only-of-typeの場合

黄色とは、はつらつ・陽気・活気・希望・愉快・注意 など

光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。

元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。

<!--1つ目の要素-->
<div>
 <h3>only-of-typeの場合</h3>
 <p>黄色とは、はつらつ・陽気・活気・希望・愉快・注意 など</p>
</div>

<!--2つ目の要素-->
<div>
 <p>光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。</p>
 <p>元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。</p>
</div>
div p:only-of-type {
	color: yellow;
}

only-childが効かない場合

最後に、only-childが効かない場合があります。
上記でonly-of-typeについて解説しましたが、子要素が1つだけならonly-childでも良いと思った方は多いと思います。

only-of-typeからonly-childに変更したら、 CSSが適用されなくなりました。
原因は、div要素の中に、他の要素(今回は見出しのh3)があるためです。

only-childが効かない場合

only-childが効かない場合

黄色とは、はつらつ・陽気・活気・希望・愉快・注意 など

光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。

元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。

<div>
 <h3>only-of-typeの場合</h3>
 <p>黄色とは、はつらつ・陽気・活気・希望・愉快・注意 など</p>
</div>

<div>
 <p>光や輝きを連想させ、明るく、ユーモアを感じさせる快活な色味を表します。</p>
 <p>元気を与える、注意を促す、集中力を上げるなどの心理効果を持っています。</p>
</div>
div p:only-child {
	color: yellow; /*--適用されない--*/
}

ポイント!
このように、only-of-typeとonly-childは使い分けが必要になってきます。
・子要素が1つだけの場合はonly-child
・指定した要素内に他の要素がある場合はonly-of-typeで指定するようにしましょう

まとめ

今回はこれで以上です。

POINT
  • only-childとは、子要素が1つだけの時に指定します。
  • only-of-typeとは、要素の種類に関係なく、指定した子要素が1つだけの時に指定します。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top