web-dev-qa-db-ja.com

クラス名にドット（。）を使用した要素のスタイル設定

ヘイ私はこのような要素を持っています

<span class='a.b'>

残念ながら、このクラス名はeコマースアプリケーションに由来し、変更できません。

クラス名にドットを付けてスタイルを設定できますか？

お気に入り

.a.b { }
cssclass
60
dotty
.a\.b { }

ただし、これをサポートしていないブラウザが存在する可能性があります。

94
RoToRa

このパーティーには非常に遅れていますが、属性セレクターを使用できます。

あなたの場合、class='a.b'要素、次を使用できます。

[class~="a.b"] {...}
// or
span[class~="a.b"] {...}

さらに、属性セレクターの完全なリストを以下に示します。

属性表示セレクター

// Selects an element if the given attribute is present

// HTML
<a target="_blank">...</a>

// CSS
a[target] {...}

属性がセレクタに等しい

// Selects an element if the given attribute value
// exactly matches the value stated

// HTML
<a href="http://google.com/">...</a>

// CSS
a[href="http://google.com/"] {...}

セレクターを含む属性

// Selects an element if the given attribute value
// contains at least once instance of the value stated

// HTML
<a href="/login.php">...</a>

// CSS
a[href*="login"] {...}

属性はセレクタで始まる

// Selects an element if the given attribute value
// begins with the value stated

// HTML
<a href="https://chase.com/">...</a>

// CSS
a[href^="https://"] {...}

属性はセレクターで終わる

// Selects an element if the given attribute value
// ends with the value stated

// HTML
<a href="/docs/menu.pdf">...</a>

// CSS
a[href$=".pdf"] {...}

属性間隔セレクター

// Selects an element if the given attribute value
// is whitespace-separated with one Word being exactly as stated

// HTML
<a href="#" rel="tag nofollow">...</a>

// CSS
a[rel~="tag"] {...}

属性ハイフン付きセレクター

// Selects an element if the given attribute value is
// hyphen-separated and begins with the Word stated

// HTML
<a href="#" lang="en-US">...</a>

// CSS
a[lang|="en"] {...}

ソース：learn.shayhowe.com

35
Matija Mrkaic