system
マリンロード

2013.12.19HTML/CSS 

マリンロード

便利なcss★セレクタ

こんにちは、

先日、今流行の胃腸炎(たぶんノロ??)にかかってしまったマリンロード佐藤です。

人生初の胃腸炎、つらかったです。。。死んでしまうんじゃないかと思いました(´Д`。)

皆様、気を付けてくださいね。

帰ったら手洗いうがい!!

 

さてさて、今回はCSSセレクタについて書こうと思います。

cssをかける対象を選択するのが、CSSセレクタ。

例をあげると

p { color : red ;}

今回だと「p」がセレクタです。

 

とーても便利なCSSセレクタをご紹介します。

【E:first-child】

・最初に現れる要素Eに適用させる。

<ul>と<li>でHTMLを作ったとき、最初のliにだけCSSをかけたいって時に使います。

【E:last-child】

・最後に現れる要素Eに適用させる。

これは先ほどの逆で、さいごのliにかけます。

【E:nth-of-type(n)】

・n番目のE要素に適用。

これスゴいです。n番目のliにCSSかけられます。

いままではクラス名をつけてCSSかけてましたが、こちらを使うとクラス名書かなくてもOK!

 

これらを使うとムダなクラスを書かなくて済むので

HTMLがすっきりしますね(*^ワ^*)

参考サイト:http://weboook.blog22.fc2.com/blog-entry-268.html Webparkさんより

 

PCサイト制作ではIEなど対応できないものもあります。

ですがスマートフォンはCSSセレクタに対応しておりますので、スマホサイト制作時には

どしどし使っていきましょうv(。・ω・。)

 

それでは。また次回(★>U<★)

 

 

 

 

 

 

 

 

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ