「CSS/記述」の版間の差分
削除された内容 追加された内容
さらにセレクタ |
→属性セレクタ: 新しい節 |
||
142 行
<p style="color:blue">クラスのテスト</p>
<p>クラスのない部分。<span style="color:blue">ここだけクラスあり。</span>ここは元通り。
<em style="color:red">emにクラスを適用。</em><span>同じクラスでも、spanには適用外。</span></p>
166 行
<source lang="html4strict">
<head>
：
途中略
：
<style type="text/css">
<!--
188 行
<p class="example1">ここは装飾なし。<span style="color:blue">ここは子要素。</span><em>子供は別の要素だけど、<span style="color:blue">孫要素には適用される。</span></em></p>
<p id="id2">ここは装飾なし。<em style="color:red">子要素には適用される。</em><span>別の子要素。<em>孫要素には適用されない。</em></span></p>
のような表示になります。
=== 属性セレクタ ===
要素だけでなく、その属性をセレクタの選択に使うことも可能です。
{| class="wikitable"
|+ 属性セレクタの指定法
! 指定方法 !! 選択されるもの !! 利用例
|-
| <code>セレクタ[属性名]</code> || <code>セレクタ</code>に一致するものの中で<code>属性名</code>という属性を持ったもの ||
|-
| <code>セレクタ[属性名="値"]</code> || <code>セレクタ</code>に一致するものの中で、<code>属性名</code>が<code>値</code>であるもの || <input>の、特定の種類に一致させる
|-
| <code>セレクタ[属性名~="値"]</code> || <code>セレクタ</code>に一致するものの中で、<code>属性名</code>が空白区切りで<code>値</code>を含むもの ||
|-
| <code>セレクタ[属性名|="値"]</code> || <code>セレクタ</code>に一致するものの中で、<code>属性名</code>が<code>値-</code>で始まるもの || 主に<code>lang</code>属性に適用される
|}
[[Category:World Wide Web|CSS きしゆつ]]
| |||