CSS3　疑似属性で楽々CSSライフ

疑似属性を使って「ul li」をスマートにCSS指定する

CSS3の疑似属性を使うと真ん中にあるリスト（li）を指定出来たり、class名に含まれる文字列を指定して複数のリストに指定出来たりと、わざわざclass名を付け直したりしなくてもCSSで指定することが出来ます。

疑似属性を使いこなす事で2歩3歩先のCSS設計が出来る様になります。

是非とも憶えましょう！

「ul li」リスト表示

基本的な「ul li」のリスト表示htmlです。

<ul>
  <li class="ham">ハム＆チーズサンド</li>
  <li class="ham-egg">卵＆野菜サンド</li>
  <li class="daily egg ham">日替わりサンド</li>
</ul>

リスト表示は最初と最後のリストは「first-child」や「last-child」で指定可能ですが、間のリストを指定するには「nth-child」で指定する方法があります。

しかし「nth-child」だと記述量が多くなる傾向にあります。

もっと簡単に指定する方法があるので、ご紹介させて頂きます。

class属性やid属性も含め、属性の値を使うセレクタ

[class] {color: hotpink;}

class=”ham”と指定した要素に適用

[class="ham"] {color: hotpink;}

class属性の値が「ham」を含む場合に適用

[class*="ham"] {color: hotpink;}

class属性の値が「ham」で始まる場合に適用

[class^="ham"] {color: hotpink;}

class属性の値が「ham」で終わる場合に適用

[class$="ham"] {color: hotpink;}

class属性の値が「ham」というスペース区切りの語句を含む場合に適用

[class~="ham"] {color: hotpink;}

class属性の値が「ham」」というハイフン区切りの語句から始まる場合に適用

[class|="ham"] {color: hotpink;}

擬似クラス

a:link { color: green; }
a:visited { color: gray; }
a:hover { color: orange; }
a:focus { color: hotpink; }
a:active { color: red; }

番外編

:before :after擬似要素でアイコンを付加する

h2:before, h2:after {
  content: "★";
  color: red;
}
h2 {
  font-size: 32px;
  font-family: 'Arial Black';
  background-color: greenyellow;
}
h2:before, h2:after {
  margin-right: 10px;
  font-family: 'メイリオ';
}

:before擬似要素は、要素の直前に内容を挿入する際に使用します。
:after擬似要素は、要素の直後に内容を挿入する際に使用します。

:first-letter擬似要素で最初の文字に装飾する

p:first-letter {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  background-color: greenyellow;
  float: left;
}

後書き

如何でしょうか。

疑似属性を使う事で思ったよりも簡単に指定する事が出来ます。

また、属性の値が使えると言う事は、「input」タグのCSS適用にとても有効だと言う事です。

CheckBOXのCSS適用にはかなり使えます。

お試し下さい！

も一つ番外編。バナー広告作ってみました

Illustratorで作成作ってみました