- HOME
- > BLOG CATEGORY
- 【CSS】構造擬似クラス:only-child、:only-of-typeの使い方
![NEW](https://shu-naka-blog.com/wp-content/themes/shu/images/common/new-arrow.png)
- お知らせ
- NEW 2024.05.16 【CSS】グラデーション色々なパターンを解説!
- お知らせ
- NEW 2024.05.15 【WordPress】親カテゴリーの子カテゴリー一覧を表示する方法
- お知らせ
- 2024.05.09 【レスポンシブデザイン】アニメーションが動かない原因
こんな方に読んでほしい
: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つだけの時に指定します。2024.05.15
2024.05.09
2024.05.09
2024.03.07
2024.05.15
2024.05.14
2024.05.09
2024.05.09
2024.05.09
2024.05.09
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog