単純なセレクタだけでもある程度の要素の選択はできますが、この記事ではさらに便利な疑似クラスと疑似要素を紹介します！
ただ慣れるまでは扱いの難しいものもあるので、とりあえずはセレクタ編を理解したうえで、先に進むのもいいかもしれません。
疑似クラス
マウスカーソルを当てた状態や、兄弟要素の何番目にある、等の特殊な状態を選択するセレクタです。HTML側にわざわざクラス等を指定する必要はありません。
[セレクタ]:[疑似クラス]等のようにセレクタで指定した要素に対する疑似クラスを、コロンで区切って指定します。コロンの前後はスペースを入れません。
マウスカーソルを重ねた状態
[セレクタ]:hoverとし、セレクタで指定した要素にマウスカーソルが重なったときのスタイルを指定します。
<a href="https://www.google.com/">google</a>/* a要素にマウスホバーしたときを選択 */
a:hover {
color: red;
}兄弟要素の最初
これは次の二通りの疑似クラスがあります。
- セレクタで指定した要素で且つ、同じ階層の一番先頭にある要素 →
[セレクタ]:first-child - 同じ階層の中で、セレクタで指定した要素の中の一番最初の要素 →
[セレクタ]:first-of-type
文章だとわかりずらいですね…
<div>
<h2>文字色が赤になります</h2>
<p>文字色がオレンジになります</p>
<p>文字色はデフォルトのままです</p>
</div>/* div以下で、h2要素で且つ、階層中の一番先頭にある */
div h2:first-child {
color: red;
}
/* div以下で、一番最初に現れるp要素 */
div p:first-of-type {
color: orange;
}
/* div以下で、p要素で且つ、階層中の一番先頭にある(つまりこのセレクタは適用されない) */
div p:first-child {
color: pink;
}:first-childで、要素に関わらず階層中の先頭を選択したいときは、*:first-childや:first-childのみとする使い方がいいでしょう。
:first-of-typeの方が一番最初に現れる要素を選択してくれるので都合よく使いやすいです。
兄弟要素の最後
これも先と同様に、二通りの疑似クラスがあります。
- セレクタで指定した要素で且つ、同じ階層の一番最後にある要素 →
[セレクタ]:last-child - 同じ階層の中で、セレクタで指定した要素の中の一番最後の要素 →
[セレクタ]:last-of-type
<div>
<p>文字色はデフォルトのままです</p>
<p>文字色がオレンジになります</p>
<ul>
<li>文字色はピンクになります</li>
<li>文字色はピンクになります</li>
<li>文字色はピンクになります</li>
</ul>
</div>/* div以下で、ul要素で且つ、階層中の一番最後にある */
div ul:last-child {
color: pink;
}
/* div以下で、一番最後に現れるp要素 */
div p:last-of-type {
color: orange;
}
/* div以下で、p要素で且つ、階層中の一番最後にある(つまりこのセレクタは適用されない) */
div p:last-child {
color: red;
}:last-childで、要素に関わらず階層中の先頭を選択したいときは、*:last-childや:last-childのみとする使い方がいいでしょう。
:last-of-typeの方が一番最後に現れる要素を選択してくれるので都合よく使いやすいです。
リストのn番目
これも二通りの疑似クラスがあります。
- セレクタで指定した要素で且つ、同じ階層の中でn番目の要素 →
[セレクタ]:nth-child(n) - 同じ階層の中で、指定した要素を数えた時にn番目に現れる要素 →
[セレクタ]:nth-of-type(n)
どちらも(n)に何番目かを指定する必要があり、次のように指定します。
- 正の整数で指定
odd: 奇数番目を指定するeven: 偶数番目を指定するAn+B: A×n+B番目を指定する。例えば、3nなら3,6,9…番目の要素となるし、2n+1なら、3,5,7…番目の要素を指定することになる
<div>
<h2>見出し１</h2>
<p>文字色はデフォルトのままです</p>
<p>文字色がオレンジになります</p>
<h2>見出し２</h2>
<p>文字色はピンクになります</p>
</div>
<ul>
<li>デフォルトです</li>
<li>背景色は金色です</li>
<li>デフォルトです</li>
<li>背景色は金色です</li>
<li>デフォルトです</li>
<li>背景色は金色です</li>
</ul>/* div以下で、p要素で且つ、階層中の3番目にある */
div p:nth-child(3) {
color: orange;
}
/* div以下で、3番目にに現れるp要素 */
div p:nth-of-type(3) {
color: pink;
}
/* ul以下で、2n番目に現れるli要素 */
ul li:nth-of-type(2n) {
background-color: gold;
}否定
[セレクタ]:not([セレクタ])とすると、()内に指定した要素以外のものを選択できます。
<ul>
<li>文字色はデフォルトのままです</li>
<li>文字色は赤になります</li>
<li>文字色は赤になります</li>
</ul>/* ulの子要素で階層中の先頭以外の要素 */
ul :not(:first-child){
color: red;
}入力必須のフォーム要素
フォーム要素に、[セレクタ]:requiredとすると、セレクタで指定したフォーム要素にrequired属性が指定されている時のみ、スタイルが適用されます。
<input type="text" required>/* required属性のあるinput要素を選択 */
input:required {
border-color: red;
}無効状態のフォーム要素
フォーム要素に、[セレクタ]:disabledとすると、セレクタで指定した要素にdisabled属性が指定されている時のみ、スタイルが適用されます。
<input type="text" disabled>/* disabled属性のあるinput要素を選択 */
input:disabled {
background-color: #eee;
}チェック状態のフォーム要素
ラジオボタン・チェックボックス要素に、[セレクタ]:checkedとすると、指定した要素がチェック状態の時やchecked属性が指定されている時のみ、スタイルが適用されます。
<label for="black">black</label>
<input type="radio" id="black" name="radio" value="black">
<label for="white">white</label>
<input type="radio" id="white" name="radio" value="white" checked>
<label for="red">red</label>
<input type="radio" id="red" name="radio" value="red">/* type属性がradioのinput要素を選択 */
input[type="radio"]{
appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid orange;
}
/* 上記の要素がチェック状態の時を選択 */
input[type="radio"]:checked{
background-color: orange;
}疑似要素
疑似要素を使うと、HTML側の要素以外に、CSS側から要素を追加することができます。
疑似要素ではテキストを追加することはあまりせず、アイコンを入れたり、デザインの為に追加することがあります。
[セレクタ]::before、[セレクタ]::afterとすると、該当要素内の先頭と、最後尾に子要素が追加されます。コロン::は二個続けて記述し、直前のセレクタとの間にスペースは入れません。
<p class="myName">katsu</p>/* myNameクラスの要素内の先頭に"私の名前は"をいれる */
.myName::before {
content: "私の名前は";
display: inline;
}
/* myNameクラスの要素内の最後に"です"をいれる */
.myName::after {
content: "です";
display: inline;
}次の記事
プロパティと値について紹介します！
