質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

1388閲覧

【CSS】子孫セレクタと擬似要素、または、子孫セレクタと擬似クラスの関係?

teratail20

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/19 07:25

不明な点

子孫セレクタと擬似要素、または、子孫セレクタと擬似クラスの関係について、
どのように解釈したら良いか、ご教示頂けますと幸いです。

該当のソースコード

①子孫セレクタと擬似要素

HTML

1<div class="box1"> 2 <p class="box1-p">テキスト</p> 3</div>

CSS

1.box1 .box1-p:before { 2 content: "要素の直前にコンテンツを追加"; 3}

<解釈の仕方>
A: "「.box1要素内の.box1-p要素」の:before" のcontentに作用する。
B: ".box1要素内の「.box1-p要素の:before」" のcontentに作用する。
AとBどちらの解釈が正しいでしょうか? AでもBでも結果は同じであると思いますが・・・。

②子孫セレクタと擬似クラス

HTML

1<ul class="example"> 2 <li>一文目</li> 3 <li>二文目</li> 4 <li>三文目</li> 5</ul>

CSS

1.example li:first-child{ 2 color: blue 3}

<解釈の仕方>
A: 「.example要素内のli要素」について、:first-childをみる。
B: .example要素内の「li要素の:first-child」、をみる。
AとBどちらの解釈が正しいでしょうか? AでもBでも結果は同じであると思いますが・・・。

以上、①子孫セレクタと擬似要素、②子孫セレクタと擬似クラス、の場合にAとBどちらの解釈をすれば良いか、
子孫セレクタの関係からご回答頂けると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2021/01/19 07:36

> AとBどちらの解釈が正しいでしょうか? AとBの解釈で何が違うとお考えでしょうか?
teratail20

2021/01/19 07:44

maisumakun様、 本質問をご覧頂きありがとうございます。 >AとBの解釈で何が違うとお考えでしょうか? ①子孫セレクタと擬似要素の場合、 "(.box1 .box1-p):before" とみるか、".box1(.box1-p:before )"とみるか、という疑問があります。 ※カッコ内はひとかたまりとみる。 ②子孫セレクタと擬似クラスの場合 "(.example li):first-child" とみるか、".example (li:first-child)"とみるか、という疑問となります。
guest

回答3

0

ブラウザのエンジンによっては、セレクタを右から解釈するものすらあります。.foo .barであれば、「.barのうち、先祖要素に.fooがあるもの」というように処理していきます。


というように、「規格書通りにエレメントをピックアップできること」がセレクタの役割なので、等価なものでどちらだろうと悩むことの実質的な意味がないと考えます。

投稿2021/01/19 07:46

編集2021/01/19 07:47
maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teratail20

2021/01/19 07:48

maisumakun様、 ご回答頂き、ありがとうございます。ご意見を参考にいたします。
guest

0

ベストアンサー

子孫結合子 (Descendant combinator)

子孫セレクタと擬似要素、または、子孫セレクタと擬似クラスの関係について、

「子孫セレクタ」でも通じますが、正しいか間違っているかでいえば、間違っています。
正式には、**子孫結合子(Descendant combinator)**といいます。

擬似要素

A: "「.box1要素内の.box1-p要素」の:before" のcontentに作用する。

beforeは擬似要素ですので、::beforeのようにコロン(:)を2つ前に置くのが正式な文法です。
後方互換性の為に、旧仕様の文法(コロン一つ)も許容されていますが、省略記法として残しているのが現状です。

CSS Level 1 / CSS Level 2 では、疑似要素と疑似クラスは,ともに 単独のコロンによる構文で一緒くたにされていたので、 UA は,以前の Level 1 / 2 による疑似要素( ::before, ::after, ::first-line, ::first-letter )に対しては,コロン 1 個による記法も受容するものとする。 この,互換性のための記法は、他の疑似要素には許容されない。 この構文は非推奨にされたので、作者は,これらの疑似要素にも Level 3 以上の二重コロン構文を利用するべきである。

擬似クラス

子孫セレクタと擬似要素、または、子孫セレクタと擬似クラスの関係について、

ご掲示のセレクタに擬似クラスはありません。
要素/擬似要素/擬似クラスの違いをおさらいしておくべきかと思います。

文章表現

A: "「.box1要素内の.box1-p要素」の:before" のcontentに作用する。
B: ".box1要素内の「.box1-p要素の:before」" のcontentに作用する。
AとBどちらの解釈が正しいでしょうか? AでもBでも結果は同じであると思いますが・・・。

セレクタは文章表現を目的とした仕様ではない為、文章に落とし込んだ時点で唯一解はありません。
文章を利用する機会に依存する問題ですので、他人に説明するなら正しい用語で伝えて通用すればよいですし、自分で解釈するなら、論理的に正しい解釈を様々な視点で考察して、全て覚えるのが正解と考えます。


例えば、「A B」というセレクタがあった場合、

  • B要素はA要素の子孫要素である
  • A要素はB要素の祖先要素である

という2つの解釈が成り立ちます。
仕様上は子孫結合子ですから、前者が正しいという解釈もありますが、実際に自分でセレクタを作る際に子孫の関係性に囚われて発想の幅が狭まるかもしれません。
発想の幅を広げるためには、様々な視点を持つことが重要であり、両方の発想が出来るのが理想と考えます。


A: "「.box1要素内の.box1-p要素」の:before" のcontentに作用する。
B: ".box1要素内の「.box1-p要素の:before」" のcontentに作用する。

両方とも「beforeのcontentに作用する」とありますが、作用する対象でみるなら、セレクタレベルになるので、::before までが正解です。
あくまで一例ですが、下記の説明が成り立ちます。

  • .box1要素の子孫要素である.box1-pの兄関係にある::before擬似要素に対して、color: blue を実行する

セレクタとプロパティの境界を正しく理解する事が必要と考えます。

Re: teratail20 さん

投稿2021/04/13 02:57

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teratail20

2021/04/14 17:09

think49様 ご回答いただき、ありがとうございます。 この質問をしてからも悩みましたが、今改めて考えてみると、 ::beforeや:first-childの前をひとかたまりとして考えることが自然なように思えます。 下記のサイトを参考にいたしました。 https://saruwakakun.com/html-css/basic/before-after http://bashalog.c-brains.jp/13/07/03-144934.php 抽象的な質問にも関わらず、ご丁寧に解説していただき、 ありがとうございます。 また、ご指摘頂いたように表記方法等も注意するようにいたします。
guest

0

The elements of the document tree that match a selector are called subjects of the selector. ... One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.

5.2 Selector syntax | Selectors

勝手訳:セレクタにマッチするドキュメントツリーの要素は、セレクタのサブジェクトと呼ばれます。... ひとつの疑似要素を最後の単純セレクタのチェーンに追加できます。その場合、スタイルはそれぞれのサブジェクトの部分に適用されます

ということなので、文章を読む感じでは疑似要素が適用される以前に、それ以外のセレクタが評価されてるような表現になっています。
実質的に意味があるのか、標準的な文章なのか、についてはよくわかりません。

コメントを受けて追記

わかりにくい、ということなので大雑把かつ簡単に説明します。
文法上は以下の通りです。

単純セレクタ = h1 などに #id .class :first-child [attr=val]などを任意の数組み合わせたもの
コンビネータ = >など
セレクタ = 単純セレクタ + コンビネータ + 単純セレクタ ...
疑似要素 = セレクタの最後に付加できる

つまり、疑似クラスは単純セレクタに含まれていて、それらをコンビネータで結合したものがセレクタで、疑似要素はその最後に付け加える、というものです。
正直、「どうでもいいな」とは思うのですが、文法にのっとるのであれば「①はA、②はB」と言えないこともないな、という感じです。

投稿2021/01/19 08:15

編集2021/01/19 09:01
Lhankor_Mhy

総合スコア35860

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

teratail20

2021/01/19 08:27

Lhankor_Mhy様、 ご回答頂きありがとうございます。 W3Cの引用文について、私の理解が追いつかない状況です・・。 ちなみにLhankor_Mhy様は、本質問の①②の場合、ABどちらで解釈されますでしょうか? コメント頂けますと幸いです。
Lhankor_Mhy

2021/01/19 08:38

等価なので考えたこともないですが、あえて言うならば「①はA、②はB」です。
teratail20

2021/01/19 09:38

Lhankor_Mhy様、 コメントおよび追記頂き、ありがとうございました。 参考にいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問