【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。

対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 「:(hoge)-child」は並び順→要素、「:(hoge)-type」は要素→並び順 ポイントはここ。 :(hoge)-child系と:(hoge)-type系では、並び順と要素の判定順が逆になります。 :(hoge)-child系はまず並び順を見て、次にそれが要素と一致するかを見ます。 :(hoge)-type系は指定の要素だけにしぼって、その上で並び順を見ます。 最後のdt、1つ目のddにスタイルがあたらなくて困った場合、 dt:last-child {

[m-r-design]

“last-of-type ”

[mika_chi]

“first-of-type”

[hanagejet]

nthまとめ。

[bleu-bleut]

dd:first-childは一つ目の要素がddだった場合に適用、dd:first-of-typeは一つ目のddに適用。

[oppara]

【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。

[findcafe]

#browsing : 【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。

[ku_marin]

:(hoge)-type使ったことなかった。こういう仕様なんだなぁ

[uca_co]

引っかかったことなかったけどなるほど

[rcorco]

理解してなかったのでじっくりと読む

[kkeisuke]

dt:last-of-type 最後のdt dd:first-of-type 1つ目のdd

[sorausa1124]

判定順は、「:(hoge)-child」は並び順→要素、「:(hoge)-type」は要素→並び順

[bashalog]

バシャログ。更新しました。