不明な点

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

該当のソースコード

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

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どちらの解釈をすれば良いか、
子孫セレクタの関係からご回答頂けると幸いです。

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）"とみるか、という疑問となります。

行動規範の内容に同意します

回答3件

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

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

投稿2021/01/19 07:46

編集2021/01/19 07:47

maisumakun

総合スコア146018

teratail20

2021/01/19 07:48

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

行動規範の内容に同意します

ベストアンサー

子孫結合子 (Descendant combinator)

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

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

14.1. 子孫結合子(Descendant combinator) - Selectors Level 4 （日本語訳）

擬似要素

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

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

3.6.1. 構文 - Selectors Level 4 （日本語訳）

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

擬似クラス

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

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

擬似クラス - CSS: カスケーディングスタイルシート | MDN

文章表現

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

総合スコア18189

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 抽象的な質問にも関わらず、ご丁寧に解説していただき、ありがとうございます。また、ご指摘頂いたように表記方法等も注意するようにいたします。

行動規範の内容に同意します

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

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

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