web-dev-qa-db-ja.com

同じ要素に対して複数の：before疑似要素を使用できますか？

同じ要素に対して複数の:before擬似を使用することは可能ですか？

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

上記のスタイルをjQueryを使用して同じ要素に適用しようとしていますが、最新のもののみが適用され、両方は適用されません。

csscss3css-selectorspseudo-elementcss-content
99
ChrisOdney

CSS2.1では、要素は常に、あらゆる種類の擬似要素のうちの1つしか持つことができません。 （これは、要素が:beforeと:afterの両方の擬似要素を持つことができることを意味します。各種類を複数持つことはできません。）

その結果、同じ要素に一致する複数の:beforeルールがある場合、それらはすべてカスケードされ、通常の要素と同様に単一の:before擬似要素に適用されます。例では、最終結果は次のようになります。

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

ご覧のとおり、優先度が最も高いcontent宣言（前述のとおり、最後に来るもの）のみが有効になります。他のCSSプロパティの場合と同様に、残りの宣言は破棄されます。

この動作は CSS2.1のセレクターセクション で説明されています：

擬似要素は、CSSの実際の要素と同じように動作しますが、例外は以下で説明します elsewhere。

これは、擬似要素を持つセレクターが通常の要素のセレクターと同じように機能することを意味します。また、カスケードは同じように機能するはずです。奇妙なことに、CSS2.1が唯一のリファレンスのようです。 css3-selectors も css3-cascade もこれについてはまったく言及しておらず、今後の仕様で明確になるかどうかはまだ不明です。

要素が同じ擬似要素を持つ複数のセレクターと一致する可能性があり、それらすべてを何らかの方法で適用したい場合は、組み合わせたセレクターで追加のCSSルールを作成する必要があります。ケース。ここでcontentプロパティを含む完全な例を提供することはできません。これは、たとえば、シンボルまたはテキストのどちらを先に表示するかが明確ではないためです。ただし、この結合されたルールに必要なセレクターは.circle.now:beforeまたは.now.circle:beforeのいずれかです。両方のセレクターは同等であるため、選択したセレクターは個人的な好みであり、contentプロパティの値のみです自分で定義する必要があります。

それでも具体的な例が必要な場合は、 この同様の質問 に対する私の答えをご覧ください。

従来のcss3-content仕様には、複数の::beforeおよび::after疑似要素の挿入に関するセクションが含まれています CSS2.1カスケードと互換性のある表記法を使用していますが、その特定のこのドキュメントは廃止されています。2003年以降更新されておらず、過去10年間にその機能を実装した人はいません。良いニュースは、放棄されたドキュメントが css-content- と css-pseudo-4 を装って積極的に書き換えられていることです。悪いニュースは、複数の擬似要素機能がどちらの仕様にも見当たらないことです。これもおそらく、実装者の関心の欠如によるものです。

83
BoltClock

メイン要素に子要素またはテキストがある場合、それを利用できます。

メイン要素を相対（または絶対/固定）に配置し、：beforeと：afterの両方を絶対位置に配置します（私の状況では絶対位置である必要があり、あなたのものについては知りません）。

もう1つの擬似要素が必要な場合は、相対/絶対/固定ではない絶対的な：beforeをメイン要素の子の1つにアタッチします（テキストがある場合は、スパンに入れて、要素があります）。 。

この要素は、彼の所有者があなたのメイン要素であるかのように振る舞います。

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}
24
HydraOrc