column

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

CATEGORY Adobe CSS Illustrator PC & Web PC情報その他 お勉強 TAG, , ,

投稿日:2013年5月2日 更新日:

執筆者:

疑似属性を使って「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;}

002

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


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

003

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


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

004

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


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

005

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


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

006

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


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

007

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


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

008

擬似クラス


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

009

番外編

: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: 'メイリオ';
}

014

 

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

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

015


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

 

後書き

如何でしょうか。

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

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

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

お試し下さい!

 

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

Illustratorで作成作ってみました

016


コメントを残す

関連記事

PREV

jQuery Mobileカスタマイズ〜ThemeRoller

NEXT

Tokyo DTM製作で2位!

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

side bar

メニューはこちら

メニューはこちら