2つ以上の属性をcssで指定するには？

2つ以上のstyleとかclassをcssで指定するにはどうすればいいんでしょうか？
言葉がわからず、、、、よろしくお願いします。

kei344

2017/09/11 14:48

具体的にどのようなHTMLに、どういったスタイルを当てたいかを提示ください。

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

回答1件

ベストアンサー

的外れかもしれませんが、以下のように行うことができると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        div {
8            width: 200px;
9            height: 200px;
10            background: blue;
11        }
12
13        div[class="box"][style="background: red;"] {
14            border: 3px dotted #000000;
15        }
16    </style>
17</head>
18<body>
19<div class="box"></div>
20<div class="box" style="background: red;"></div>
21<div style="background: red;"></div>
22</body>
23</html>

参考: 6.3.1. Attribute presence and value selectors - Selectors Level 3

Multiple attribute selectors can be used to represent several attributes of an element, or several conditions on the same attribute. Here, the selector represents a span element whose hello attribute has exactly the value "Cleveland" and whose goodbye attribute has exactly the value "Columbus":

span[hello="Cleveland"][goodbye="Columbus"]

投稿2017/09/11 14:50

編集2017/09/11 14:51

s8_chu

総合スコア14731

think49

2017/09/11 15:02

> div[class="box"][style="background: red;"] 趣旨には同意ですが、class, style属性を属性セレクタで参照するのは良い手法ではないように思います。質問の要件がよく分からない面は確かにあるのですが…。

abinai

2017/09/11 20:35

そういう風にかけるんですね～。ありがとうございます。 div[class="box"][style="background: red;"] ですが、class, style属性は属性セレクタで参照する以外にいい方法ってあるんでしょうか？

x_x

2017/09/12 00:59

クラスセレクタでしょう。セレクタはたくさんあるのでご覧ください。 https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Getting_started/Selectors

think49

2017/09/12 01:11

x_x さんの仰る通り、[class="box"] は .box にします。 [style="background: red;"] はHTMLが style="background: red;color: #333;" 変更されたら機能しなくなるので、セレクタで指定するものではないと思います。 style="background: red;" をクラス化して、.box.foo のようにマルチクラスで指定するのが好ましいと思います。

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