CSSの優先度とちょっと便利な指定方法について

/ HTML5/CSS3/jQuery / Comment[0]

CSSの優先度

CSSの優先ルールとは1000,100,10,1の位に分けて以下のルールに従って点数を足し算して点数が一番高いセレクタのスタイルが優先的に効くというものです。!importantとつけたセレクタはどれよりも優先度が高くなります

以下が優先度と点ですが、これらの数字は繰り上がりません。

  1. !important:最重要
  2. インラインスタイル:1000に加算
  3. id:100に加算
  4. クラス、属性、擬似クラス:10に加算
  5. 要素、擬似要素:1に加算

優先度の例:

  • * { 0.0.0.0
  • li { 0.0.0.1
  • ul li { 0.0.0.2
  • section + p { 0.0.1.1
  • section ul li.current { 0.0.1.3
  • p.name.color { 0.0.2.1
  • #wrap { 0.1.0.0
  • style="font-weight:bold" 1.0.0.0

ちょっと特殊なスタイルの効かせ方

直属の子要素だけ

>を使用すると直属の子要素を選択することができます。

.parent > p
<div class="parent">
  <div>
    <p>スタイルが効く</p>
  </div>
  <p>こっちには効かない</p>
</div>

隣接する次の要素に

+を使うことで隣接する兄弟要素に効かせることができます。

article h1 + p
<article>
  <h1>見出し</h1>
  <p>ここにスタイルが効きます。</p>
  <p>ここを例にするとarticle内のh1のすぐ隣にいるp要素にスタイルが効きます。
  隣の隣のpや下階層のpには効きません。</p>
</article>

後に続く要素全て

~を使用すると後に続く全ての要素を選択することができます。
例えばブログなどの記事一覧ページの記事ごとのセクションにmargin-bottomをかけたとすると一番下のエントリに不要なmargin-bottomがかかってしまいます。
そんな時は~で1番目の記事をスキップして2番目のセクションからmargin-topをかけることで無駄のないスマートなmarginをかけることができます。

section ~ section { margin-top: 30px; }
<section>
  <h1>見出し<h1>
  <p>内容内容内容内容内容内容</p>
</section>

マージントップが入る
<section>
  <h1>見出し<h1>
  <p>内容内容内容内容内容内容</p>
</section>

マージントップが入る
<section>
  <h1>見出し<h1>
  <p>内容内容内容内容内容内容</p>
</section>

属性セレクタ

通常は要素名とクラス名で指定するのが一般的ですが、属性を使った指定も可能です。
属性セレクタは属性に対する条件式を[]で囲むことで指定できます。

次の例ではtitle属性を持っているa要素を指定します。

a[title]

属性の値にマッチする要素のみを指定することも可能です。

a[title="entry-100"]

次の例ではhref属性の値がftpから始まるa要素を指定します。

a[href^="ftp://"]

次の例はhref属性の値がjpgで終わるa要素を指定します。

a[href$=".jpg"]

次の例は属性の値に指定した文字が含まれている要素を指定します。

a[href*="event"]
関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可