こんにちは、中村です。「CSSのやり方教えて。あ、わかりやすくね！」と言われるのでCSSのセレクターの指定方法についてまとめました。あと、いまさらながら自分自身の体系的な勉強にもなればなと思い記します。少しでも需要があればよいかなと。
この記事の目次
CSSの基本
CSSの指定の方法は、下記のような形になります。
css
セレクター {プロパティ: 値;}
それぞれ、セレクターがCSSを適用させたい要素、プロパティが変化させる要素（フォントの色や背景等）、値には具体的な数値などが入ります。CSSの記述方法は数多くあるのですが、全てにおいてこの形に統一されます。それではここからは、実際の指定を見ながら理解を深めていきましょう。
[要素,class,ID]それぞれの指定方法について
『<div>,<p>』要素指定
CSSでセレクターに要素を指定する方法です。最も一般的でポピュラーな指定方法になります。<div>や<p>での要素全てに対する指定になりますので、大枠の仕様を定めるときに利用するのが一般的です。
css
div{ color : red ; }
html <div>テキストが赤くなります。</div>
テキストが赤くなります。
『.』クラス指定
クラス指定は、要素に付与したclass属性に対しての指定になります。同じHTML上にclassは複数存在できるので、装飾のために要素にクラス指定を行って、デザインの体裁を整えたりするのに用いられます。
css
.hoge { font-size : 12px ; }
html <p> 一部だけ<span class="hoge">フォント</span> の<span class="hoge">サイズ</span>が小さくなります。 </p>
一部だけフォントのサイズが小さくなります。
『#』IDを指定
ID指定は、クラス指定と同様にID属性に対しての指定となります。ID属性は同一HTML上に、複数の存在を認められていません。
css
#hoge { color : red ; }
html <p id="hoge">赤くなります</p>
赤くなります
『[属性]』属性を指定
HTMLで記述している属性によってもCSSを適用させることができます。属性については属性そのものに対しての指定と、さらにその値まで含めた指定を行う２パターンが存在します。
属性に対して指定した例です。
css
button[type] { color : red ; }
html <button type="submit">文字色が赤に！</button> <button>文字色は変わらず。</button>
値まで合わせて指定した例です。
css
button[type="submit"]{ color: red;}
html <button type="submit">文字色が赤に！</button> <button type="reset">文字色は変わらず。</button>
CSSでは、１つのセレクターの指定だけでも、このように幾つかの指定方法が存在します。それぞれの記述方法を理解して、HTMLの文書構造などに合わせて指定ができるようにしておきましょう。
要素の階層に合わせた指定について
１つの要素の指定だけでWebサイトを作成しようとした場合は、class指定やID指定で記述するCSSが膨大になってしまったり、多くなったclassやID指定によってHTMLが読みにくくなってしまう可能性があります。そこで、次の項目からはさらに細かな条件設定についてご紹介します。
『div p』要素の中の子要素を指定
要素の中の要素、という指定によってセレクターを指定することも可能です。下記の記述では<p>の子要素の<span>に対してのみ、CSSを適用させています。
css
p span { color : blue ; }
html <p>特定の<span>箇所だけにCSS</span>を適用することができます。</p>
特定の箇所だけにCSSを適用することができます。
また、この指定はIDやclassを用いて指定することも可能です。
css
#hoge .hoge { background : #5A718F ; color : white;}
html <p id="hoge">IDや<span class="hoge">class</span>での指定も可能です。</p>
IDやclassでの指定も可能です。
『div>p』直下の要素にのみ指定
『>』を用いることで、直下の子要素にのみCSSを適用させるセレクター指定を記述することが可能です。
css
div>span { color : red ; }
html <div>直下の<span>要素</span>にのみ適用され <p>直下でない場合は<span>適用されません</span>。</p> </div>
直下の要素にのみ適用され
直下でない場合は適用されません。
リンク要素の状態による指定
HTMLでは、複数のページを行き来するためのリンクが多く存在します。ユーザーがWebサイトを閲覧することを考え、リンクにも見やすい装飾をするために<a>には、色々な条件でのCSSを付与することができます。
『:link』未訪問のリンクに対しての指定
『:link』を指定することで、未訪問時のリンクにのみCSSを適用させることができます。これによりユーザーに対してまだ未訪問のリンクが存在することを知らせてあげることができます。
css
a:link{color:green;}
html フォントの色が<a href="#">◆みどり◆</a>になります
フォントの色が◆みどり◆になります
『:visited』訪問済みのリンクに対しての指定
訪問済みのリンクに対してのCSSの指定が可能です。ユーザーが同じページに何度も遷移してしまうのを防止するなど、ユーザーの動きを制御することができます。
css
a:visited{color:orange;}
html クリック後、<a href="#">オレンジ</a>になります。
クリック後、オレンジになります。
『:active』クリック時のみ指定
クリックされている場合のみCSSを適用させることができます。ユーザーに対して、クリックした箇所を知らせてあげることができます。
css
a:active{color:purple;}
html クリックの間、<a href="#">ムラサキ</a>になります。
クリックの間、ムラサキになります。
『:hover』マウスオン時のみ指定
マウスオンされた時にCSSを適用させることができます。クリックが可能な要素をユーザーに知らせることができます。
css
a:hover{font-size:150%;}
html マウスオンの間、<a href="#">サイズが大きく</a>になります。
マウスオンの間、サイズが大きくになります。
『:focus』フォーカス時のみ指定
フォーカスされている時のみ指定することができます。選択項目などでユーザビリティを向上させることができます。
css
a:focus{font-weight:900;}
html フォーカスしている間<a href="#">サイズが太く</a>になります。
フォーカスしている間サイズが太くになります。
『:target』ターゲット箇所の指定
ページ内リンクなどで遷移した際に、飛ばされた箇所をユーザーに対して知らせることができます。
css
a:target{background:yellow;}
html <p>リンクを<a href="#target">クリック</a>すると。</p> <p id="target">遷移先に背景がつきます</p>
リンクをクリックすると。
遷移先に背景がつきます
条件設定によるさらに限定的なCSSの指定
最期に、要素間の条件などによるセレクターの指定方法について触れたいと思います。こちらでは同じHTML構造に対してセレクターで条件設定を行うことで、一部にのみCSSを適用させる方法をご紹介しています。
『:not(n)』指定した以外のセレクターに適用させる
『:not(n)』を仕様すると、合致するセレクターの中からnot()のカッコ内の条件に適合する要素のみを省いてCSSの指定ができます。
css
p:not(.hoge){ color: red ; }
html <ul> <li>文字はレッドになります。</li> <li class="hoge">文字はブラックになります。</li> </ul>
- 文字はレッドになります。
- 文字はブラックになります。
『:nth-child(n)』前からn番目の要素を指定
『:nth-child(n)』では、合致するセレクターの中から前方からn番目のセレクターにのみCSSを適用させることができます。
css
ul li:nth-child(2){font-weight:900;}
html <ul> <li>細いフォントになります。</li> <li>太いフォントになります。</li> <li>細いフォントになります。</li> <li>細いフォントになります。</li> </ul>
- 細いフォントになります。
- 太いフォントになります。
- 細いフォントになります。
- 細いフォントになります。
『:nth-last-child(n)』後ろからn番目の要素を指定
『:nth-last-child(n)』では、合致するセレクターの中から後方からn番目のセレクターにのみCSSを適用させることができます。
css
ul li:nth-last-child(2){font-weight:900;}
html <ul> <li>細いフォントになります。</li> <li>細いフォントになります。</li> <li>太いフォントになります。</li> <li>細いフォントになります。</li> </ul>
- 細いフォントになります。
- 細いフォントになります。
- 太いフォントになります。
- 細いフォントになります。
『:first-child』最初のセレクターを指定
『:first-child』では、合致したセレクターの内、最初に存在する要素に対しての指定が可能です。
css
ul li:first-child{font-weight:900;}
html <ul> <li>太いフォントになります。</li> <li>細いフォントになります。</li> <li>細いフォントになります。</li> </ul>
- 太いフォントになります。
- 細いフォントになります。
- 細いフォントになります。
『:last-child』最後のセレクターを指定
『:last-child』では、合致したセレクターの内、最後に存在する要素に対しての指定が可能です。
css
ul li:last-child{font-weight:900;}
html <ul> <li>細いフォントになります。</li> <li>細いフォントになります。</li> <li>太いフォントになります。</li> </ul>
- 細いフォントになります。
- 細いフォントになります。
- 太いフォントになります。
おわりに
CSSのセレクターの指定をまとめました。CSSを勉強しはじめてから、多くの方がつまづく難関になるところなので、少しでもその助けになればよいかなと思っています。かくいう僕もCSSはセレクターの指定が上手くいかず何度も詰みかけましたし。。。あとはfloatですね。