お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

この要素の、先頭にいるあなたは職員室に来なさい///

怒涛の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:横ならびのリスト作って
    右方向にマージンを開けてあげてください。
    但し、最後の要素には右マージンを付けないようにしてください。