この要素の、先頭にいるあなたは職員室に来なさい///
怒涛のfloatが終わりました。
floatの時に、:afterと呼ばれる疑似クラスがあるよ!とお話しました。
必須ではないですが、知っていると凄く便利なのでやっていきましょう。
今回のCSS
- ・疑似クラスとCSSセレクタ!
そもそも疑似クラスとかCSSセレクタって何?
簡単に説明すると
【色んな条件の元色んな所にCSSを適用させる方法】
となります。
復習も兼ねて指定方法などを説明していきます。
ふくしゅう!
とあるクラスに対してCSSを適用させる。
クラスに対してCSSを適用させるには先頭に.(ドット)を付けて、クラスの名前を書いてあげます。
.className {color:red;}
とあるIDに対してCSSを適用させる。
IDに対してCSSを適用させるには先頭に#(シャープ)を付けて、IDの名前を書いてあげます。
#idName {color:red;}
とある要素に対してCSSを適用させる。
要素に対してCSSを適用させるにはそのまま要素名を書いてあげます。
elementName {color:red;}
指定したモノの子孫要素に対してCSSを適用させたい。
まず最初に指定したい子要素の親にあたるものを書きます。
無論、IDでもclassでも要素でもなんでもよいです。
で、その後に【半角スペース】を入れてあげます。
#a #a1 {color:red;}// ID:aの子要素内のID:a1に対してCSSを適用させる #b .b1 { color:red; } // ID:bの子要素内のclass:b1に対してCSSを適用させる #c p { color:red; } // ID:cの子要素内のpタグに対してCSSを適用させる
指定した要素にとあるIDまたはclassが付いている場合にCSSを適用させたい。
例えば、以下のようなパターン
<p class="test">あああああ</p> <div class="test">うおおおおお</div>
違う要素だけど、同じクラスが付いている。
でも、pの所だけにCSS適用したい!場合
要素名に続いてIDまたはクラスの指定を行います。
p.test {color:red;}// testクラスがついているpタグだけにCSSを適用
疑似クラス
:hover
指定要素にマウスオンした時に
と言った意味があります。
a:hover が一番良く見かける形です
テキストリンクに良く使われます。
:visited
訪問済みのリンクに対してCSSをかける事ができます。
hoverとvisitedの記述順ですが
CSSは記述が後になるほど優先順位が高くなりますので
:visited→:hoverの順に書かないと
訪問済みリンクにマウスオーバーしても:hoverが動かなくなります。
(同一CSSの指定が上書きされるため)
a {color:red;} a:visited {color:blue;} a:hover {color:green;}
:after
前回の内容の通り、要素の最後に内容を追加するCSSとなります。
a:after {content:""}
:before
;afterの逆、つまり要素の先頭に内容を追加するCSSとなります。
a:before {content:""}
:first-child
指定した要素の中で最初に表示されるもののみが対象になります。
ul li:first-child {margin-top:0}
セレクタ
特定の属性を持つ要素に適用
指定した要素に指定した属性がある場合にCSSを適用させます。
a[title] {margin-top:0} // aタグにtitle属性が記述されている場合
特定の【属性値】を持つ要素に適用
指定した要素に指定した属性と値がある場合にCSSを適用させます。
a[target="_blank"] {margin-top:0} // aタグのtarget属性に_blankが記述されている場合CSSを適用
例も兼ねてもう少し詳しく
first-childは使用頻度が高いです。(僕の中では重宝してます)
例を見ながら詳しく見ていきましょう。
:first-child
- 六甲颪に
- さっそうと
- 蒼天翔ける日輪の
<style> <!-- #testFC li { width: 150px; border: 1px #000 solid; color:#D28E1F; padding: 10px 0; } #testFC li:FIRST-CHILD { color: #93BDEF; } --> </style> <div class="mb20"> <ul id="testFC"> <li> 六甲颪に </li> <li> さっそうと </li> <li> 蒼天翔ける日輪の </li> </ul>
まず、id testFCの子要素のliに対してスタイルが書かれていますね。
で、その下に 【#testFC li:FIRST-CHILD】とあります
これは、[ id testFCの子要素のliの一番最初 ]といった意味になります。
最初のliの指定を受けつつ、同一CSSは上書きされています。
liの一番最初に、それ用のクラスをつけて対処でもよいのですが
このやり方の場合は、CSSのみで完結できるので楽です。
今回は分かりやすいようにliにしましたが、divでもpでもいけます。
例えば、divが縦に連って下にマージン10px;とかしたいけど、最後のdivだけマージンいらない時なんかは
<style> <!-- #test div { margin-top:10px; } #testFC div:FIRST-CHILD { margin-top:0px; }
ってな感じで応用して使えます。
最後の要素の指定方法として、last-childってのが実はあるんですが
現在IE8のバカタレが認識してくれないので実質使用不可です。
練習問題的な
クエスチョンはここから
-
1:テキストリンクを作って
通常時:リンク下線あり、リンク色は任意
ホバー時:リンク下線なし、リンク色は任意
訪問済みリンク:リンク下線あり、リンク色は任意
と指定してあげます。
また、一つをblankリンクとし、そのリンクの背景色を指定してあげてください。 -
2:縦ならびのdivを複数作って
下方向にマージンを開けてあげてください。
但し、最後の要素には下マージンを付けないようにしてください。 -
3:横ならびのリスト作って
右方向にマージンを開けてあげてください。
但し、最後の要素には右マージンを付けないようにしてください。