- ベストアンサー
CSSのクラス名・ID名の指定でワイルドカードか正規表現を使いたい
CSSでクラス名やID名を指定する場合に、 ワイルドカードか正規表現を使いたいと思ったのですが、うまくできません。 使えないのでしょうか？ また、他に、似たクラス名・ID名を一括で指定する方法はありますか？ 例） <div id="cat1">猫が１匹</div> <div id="cat2">猫が２匹</div> <div id="cat3">猫が３匹</div> #cat1, #cat2, #cat3{color:#FF00FF;} を #cat*{color:#FF00FF;} のようにまとめて指定したい。
- biwa_nya-su
- お礼率58% (75/128)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- CSSのクラス指定について
CSSのクラス指定で質問させていただきます。 下記の条件で「a-クラスのついたDIV」の中で、 なおかつ一番初めに表示される[a-]の背景色だけ「赤色」にする方法を教えてください。 「a-1」「a-2」「a-3」はそれぞれ時間によって消えたりし、[x]が挿入されたりします。 以上のように条件が変わっても、常にclass=「a-」のついた一番上のDIVの背景は赤色になります。 HTML------------------- <div class="wrapper"> <div class="x"></div> <div class="a-1"></div> <div class="a-2"></div> <div class="a-3"></div> </div> css----------------------- [class^="a-"]{}; nth-of-typeを使って指定できると思うのですが、いまいちうまくできません＞＜ ぞうぞよろしくお願いします。
- ベストアンサー
- CSS
- CSSでクラス名を指定してもうまくいかない
下記URLのサイトを参考にして「Google+1ボタン」を設置しようとしています。 https://developers.google.com/+/web/+1button/?hl=ja とりあえずサイト上には設置できたのですが、今度はこの「Google+1ボタン」を自分が設置したい場所に貼り付けるために、CSSで指定しようと思いました。 ちなみに、取得したコードは以下のようになっています。 <!-- +1 ボタン を表示したい位置に次のタグを貼り付けてください。 --> <div class="g-plusone" data-size="medium"></div> <!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 --> <script type="text/javascript"> window.___gcfg = {lang: 'ja'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> コードは上記のようになっています。 class="g-plusone" となっていますので、このままこれをクラス名としてCSSに記述しても適用されません。 そこで、これにさらに<div>タグで囲んで、この<div>にクラスを付ければできると思い <div class=”sample”><div class="g-plusone" data-size="medium"></div></div> として、sampleに対してスタイルを指定してみたところ、うまくできました。 しかし、できればこのようなことはせず、"g-plusone"というクラス名が最初から付いているわけですから、これを利用できないかと考えています。 もし、できるのであれば、そのやり方を教えてください。
- ベストアンサー
- CSS
- CSSでID指定の親子を重ねる理由
<div id="1"> <div id="2"> </div> </div> というDOM構造に対し、 #1 #2{color:#fff;} のようなスタイルの指定をサンプルやハウツーよく見かけます。 2はIDなので、わざわざ親の#1の中にある#2と指定しなくても#2が指定されるでしょう。 なぜ、#1 #2{color:#fff;}のような記述をするのでしょうか？
- ベストアンサー
- CSS
- 「CSSで1つの要素に複数のクラスを指定する」に対応したブラウザは？
恥ずかしながら、最近ようやく『同一idは一つのページ内で複数用いるべきではない』の意図するところが分かってきました。これまで、この事を理解していなかったがために、 aaa ←文字色：青、背景色：黄 bbb ←文字色：緑、背景色：黄 ccc ←文字色：青、背景色：赤 ddd ←文字色：緑、背景色：赤 といった表現を実現するために、 ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} #bg_yellow{background-color:yellow;} #bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue" id="bg_yellow">aaa</div> <div class="green" id="bg_yellow">bbb</div> <div class="blue" id="bg_red">ccc</div> <div class="green" id="bg_red">ddd</div> というようなソースをよく書いておりました。この場合、idの意味を理解して、解決するには、例えば下の3通りの方法があるように思います。 (1)IDを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- #blue_bg_yellow{color:blue;background-color:yellow;} #green_bg_yellow{color:green;background-color:yellow;} #blue_bg_red{color:blue;background-color:red;} #green_bg_red{color:green;background-color:red;} ---HTMLファイル内の記述---- <div id="blue_bg_yellow">aaa</div> <div id="green_bg_yellow">bbb</div> <div id="blue_bg_red">ccc</div> <div id="green_bg_red">ddd</div> (2)クラスを4つ作成し、1つずつ適用する ---CSSファイル内の記述--- (1)の『#』を『.』にする ---HTMLファイル内の記述---- (1)の『id』を『class』にする (3)クラスを4つ作成し、2つずつ適用する ---CSSファイル内の記述--- .blue{color:blue;} .green{color:green;} .bg_yellow{background-color:yellow;} .bg_red{background-color:red;} ---HTMLファイル内の記述---- <div class="blue bg_yellow">aaa</div> <div class="green bg_yellow">bbb</div> <div class="blue bg_red">ccc</div> <div class="green bg_red">ddd</div> 今回の例では、数も少なく、どれでもそれほど変わらない感じですが、この(3)の書き方には、どれほどのブラウザが対応しているのでしょうか？ 個人的に使用しております ・Firefox 2.0 ・Internet Explorer 6.0 では動作するのですが、それ以外のブラウザでの動作に関してご存知の方は、ぜひ教えて下さい。(特にMacは持っていませんので、Macのブラウザの情報は非常にありがたいです) ある程度のブラウザで動作するようなら、 .b,strong{font-weight:bold;} .i,em{font-style:italic;} .u,ins{text-decoration:underline;} .s,del{text-decoration:line-through;} .u_s{text-decoration:underline line-through;} のように、よく使いそうな表現をまとめたスタイルシートを作ろうかな、などと考えております。打ち消しながら下線引く事なんかはまずないとは思いますが、これは例えばの話です。 長文を最後までお読みいただきありがとうございました。
- 締切済み
- CSS
- 指定したidやclass以外の要素を指定するには
cssで特定のidやclassを持った要素を指定することは常識ですが 指定したidやclass以外の要素を指定する方法はありますか？ 例えば#mainというidを持ったdiv要素を除いた全てのdiv要素を指定するなど。 本来は共通のクラスを割り当てるのが正しいやり方だと思いますが、、、
- ベストアンサー
- CSS
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- CSSで指定したwidthをマウスで変更したい
frameはnoresizeを指定しなければ、マウスドラックでサイズの変更ができますが、同じような事をframeを使わずにCSSとjavascriptで出来ないものでしょうか？ 具体的に言うと、以下に示すhtmlの20%,80%のwidthをマウスドラックで変更できないでしょうか？ <html> <head> <style type="text/css"> #f1 { float:left; width:20%; overflow: auto; background-color : #ffd2ff; } #f2 { float:right; width:80%; background-color : #e0fef8; } </style> </head> <body> <div id="f1">f1</div> <div id="f2">f2</div> </body> </html>
- ベストアンサー
- JavaScript
- CSS／日本語のID・クラス名について
CSSに、日本語のID・クラス名をつけてもよいのでしょうか？ ネットを検索したところ、 「CSS2からクラス名に日本語が利用可能。但し、IDは日本語不可」 との記述がありました。 本当でしょうか？ 誰か詳しい方、教えてください。 ▼補足 自分の環境(WindowsIE8)では、クラス名に日本語を利用しても、正常表示されました。しかし、違う環境で不具合がないかや、そもそも推奨されている手法なのかどうかについて、是非知りたいと考えています。 W3C等に準拠しているかどうか、教えてください。
- ベストアンサー
- HTML
- CSS classの場合とidの場合の指定方法
h1などをブロック要素ごとに、違うスタイルを適用させたく、下記のように、記述したのですが、ブロック要素をidで指定する場合は同じように、#mainと#main h1で指定し、<div id="main">とすればよいのでしょうか？ それとも、h1は.main h1 とクラス指定して、<div id="main" class="main">とした方がよいのでしょうか？変な質問かもしれませんが、どちらも同じように表示するので、どちらがよいのか分かりません． <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- .main { width:100px;} .main h1 { color:red;} --></style> </head> <body> <div class="main"> <h1>aaa</h1> </div> </body> </html>
- ベストアンサー
- HTML
- CSSでの幅指定・・・
CSSで、 一つのdivの中に、二つのdivがあるとき、 二つのdivの片方を310px;で指定して、 もう片方を、画面サイズにあわせて可変するようにするにはどうしたらよいですか？ 310pxで指定したところは、文章などがはみ出さないようにしたいです。(つまり、二つの文章同士がはみ出さないようにして欲しいです。) CSSのソースはこちらです。 div#content{ width: 100%; } div#1{ float: left; } div#2{ width: 310px; float: right; } HTMLは、上記の通り、一つのdivに二つのdivが入っている状態になっています。 <div id="content"> <div id="afl1"> </div> <div id="web1"> </div> </div>
- 締切済み
- HTML
お礼
まだ実際上使えないのですね。ありがとうございました。