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

- お知らせ
- NEW 2023.06.01 【CSS】画像の透過について、mix-blend-modeを使ってみよう
- お知らせ
- 2023.05.18 【WordPress】各ページ背景画像の指定についてbody_classを解説
- お知らせ
- 2023.05.11 【WordPress】CPT UI インポート/エクスポート機能について解説
こんな方に読んでほしい
:only-child、:only-of-type
の使い方について学びたい方へonly-childとonly-of-typeについての解説になります。
この2つの擬似クラスの共通点は「子要素が1つだけ」の時にCSSが適用されます。
[記事の内容]
今回は構造擬似クラスの:only-child、:only-of-typeについての解説記事なります。
書き方は以下のようになります。
/*--only-child--*/
要素:only-child {プロパティ: 値;}
/*--only-of-type--*/
要素:only-of-type {プロパティ: 値;}
: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
とは、セレクタで指定した子要素が、要素の種類に関係なく1つだけの時にスタイルが
適用されます。
今回は、div
要素を2つ用意し、
1つ目の要素には、見出し(h3)と段落(p)を1つずつ使用しております。
2つ目の要素には、段落(p)を2つ使用しております。
こよのうに、1つ目の要素の中には見出し(h3)も含まれていますが、段落(p)は1つしかないため、CSSが適用されます。
2つ目の要素の中には段落(p)が2つあるため、CSSが適用されません。
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-of-typeについて解説しましたが、子要素が1つだけならonly-childでも良いと思った方は多いと思います。
only-of-typeからonly-childに変更したら、 CSSが適用されなくなりました。
原因は、div要素の中に、他の要素(今回は見出しのh3)があるためです。
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で指定するようにしましょう
今回はこれで以上です。
only-child
とは、子要素が1つだけの時に指定します。only-of-type
とは、要素の種類に関係なく、指定した子要素が1つだけの時に指定します。2023.06.01
2022.06.10
2022.06.03
2021.08.10
2023.06.01
2023.05.18
2023.05.11
2023.05.09
2023.05.04
2023.04.27
2022.06.30
2020.03.22
2020.03.06
2020.02.22
© 2020 shu-naka-blog