CSS/Javascript

2015年7月1日 at 3:09 PM

cssで要素の指定に、ワイルドカード「*」のような正規表現を使いたい場合の方法

cssで、例えば「ascrai0001」~「ascrai0010」までの要素があり、それら全てに特定のデザインの設定を行う場合は、以下のようにします。

 

HTMLが

<div id = “ascraiXXXX”></div>   ←XXXX」は任意文字列

 

css

[id^="ascrail"] {
    width: 20px !important;
}

 

 

^」は正規表現で「~で始まる」という意味です。上記のcssの設定を行った場合、要素の名前が「ascrai」という文字列で始まるもの全てを、横幅20pxにするという指定になります。

 

 

上述のパターンのような設定には、「*(を含む)」「$(で終わる)」も指定できます。

 

例えば、「list」という文字列を含むもの全てに、「width: 20px;」を設定したければ、

 

[id*="list"] {
    width: 20px !important;
}

 

とすることで実現できます。

 

 



◆特定の条件に当てはまる要素の直下にある小要素も指定可能

 

上述を応用すると、

 

[id^="ascrail"] > * {
    width: 20px !important;
}

 

という指定もできます。

 

これは

<div id=”ascrailXXXX”>

  <div>

  </div>

</div>

 

 

オレンジ色の部分に対し、デザインの設定が行われる指定です。

<div id=”ascrailXXXX”>の小要素の<div>にid=とかclass=の指定をしていないけど、その要素にデザインを設定したいときに役立ちます。

 

>」は直下の小要素を指定するときの指定。「*」は全ての要素を指します。

 

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



こちらの関連記事もオススメ!