【プログラミング独学17日目】:hover擬似クラス・順番に関する擬似クラス・:empty擬似クラス・:not擬似クラス

2022-03-26FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。

私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

https://chanmk.tokyo/programming_1/

今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

プログラミング案件も受注できるようになりたい
歯科衛生士エンジニアを目指したい
コーディングもライティングもできる歯科衛生士

【プログラミング独学17日目】学んだこと

今日もCSSの続きをやりました。昨日？？？となった擬似クラスの続きだったので不安でしたが、今日のところは問題無くサクサク進みました。1日で合計2時間も取れていませんが、これからも少しずつ積み重ねていきます。

① : hover擬似クラス

昨日学んだ「::before」や「::after」といった擬似要素は、要素の特定の部分をスタイリングするためのものでした。例えばh1の前（::before）やh2の後ろ（::after）など。それに対して、要素の状態に応じてスタイリングするものを「擬似クラス」と呼びます。

例えば以下のようなHTMLとCSSでOKボタンを表示させたいとします。

<body>
　<div class="btn">OK</div>
</body>

.btn {
　width : 100px ;
　background-color : skyblue ;
　text-align : center ;
　padding : 4px ;
　color : white ;
}

これによりボタンは正しく表示されますが、ボタン上にマウスカーソルが乗ったときに色を変えるなどスタイルを追加したい、と思ったとします。このように要素の状態に応じてスタイリングするときに使えるのが擬似クラスで、以下のように書き加えれば良いです。

.btn {
　width : 100px ;
　background-color : skyblue ;
　text-align : center ;
　padding : 4px ;
　color : white ;
}

.btn :hover {
　opacity : 0.8 ;
}

「.btn」の元々の状態とは別のときに現れるスタイルであり、かつ元々のスタイルに加えるような形であるため、上のように別枠で書き加えます。

②カーソルを変化させたいとき

ボタン上にマウスカーソルが乗ったとき、ボタンの色を変化させるだけでなくマウスカーソルの形を指の形に変えると、押下できることがわかりより親切です。これは「.btn」セレクターに以下のように書き加えます。

cursor : pointer ;

③順番に関する擬似クラス（1）

同じ階層内で並んでいる要素の順番に対して使う擬似クラスもあります。例えば以下のような記述があったとします。

<main>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
</main>

ここで、例えば3番目の<p>にだけスタイルを付けたかったとしましょう。class名を付けて個別で指定しても良いですが、<p>の数がもっと増えてくると面倒です。そこで使えるのが「:nth-child( )」という擬似クラスです。

<main>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
　<p>こんにちは。</p>
</main>

main > :nth-child(3) {
　background :pink ;
}

上のように書くと、「mainの直下にある要素のうち3番目（のp）」という意味になります。

④順番に関する擬似クラス（1）／nの使用

以下のような記述も可能です。

main > :nth-child(3n) {
　background :pink ;
}

main > :nth-child(3n+1) {
　background :pink ;
}

nには自然数が入るため、規則性を持ったスタイリングが可能です。

なお例えば3色交互に背景色を変えていきたいときは以下のように記述します。

main > :nth-child(3n) {
　background :red ;
}

main > :nth-child(3n+1) {
　background :blue ;
}

main > :nth-child(3n+2) {
　background :green ;
}

独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

⑤順番に関する擬似クラス（1）／odd・even

:nth-childは以下のように書くこともできます。

main > :nth-child(odd) {
　background :pink ;
}

main > :nth-child(even) {
　background :pink ;
}

「odd」は奇数、「even」は偶数という意味です。そのため奇数番目にのみスタイルを指定したいときは:nth-child(odd)、偶数番目にのっみスタイルを指定したいときは:nth-child(even)と記述します。

⑥順番に関する擬似クラス（1）／first・last

一番最初と一番最後にのみスタイルを付けたい場合は、以下のように記述して指定することもできます。

main > :first-child {
　background :pink ;
}

main > :last-child {
　background :pink ;
}

⑦順番に関する擬似クラス（2）

例えば以下のようなHTMLがあったとします。

<main>
　<h1>見出し1</h1>
　<p>こんにちは。</p>
　<h2>見出し2</h2>
　<p>こんにちは。</p>
　<h2>見出し2</h2>
　<p>こんにちは。</p>
</main>

このとき2番目の<h2>にのみスタイルを付けたいと思ったとしましょう。階層に限らず、要素の種類も指定してスタイリングしたいときです。そのときは以下のように記述します。

main > h2 : nth-of-type(2) {
　background : pink ;
}

これは「mainの直下のh2の2番目（＝2番目のh2）にスタイルを適用する」という意味です。

「:nth-of-type( )」は:nth-childと同様、oddやeven、3nや3n+1などが使えます。また以下のように最初と最後を指定することもできます。

h2 : first-of-type

h2 : last-of-type

これまでをまとめると以下のようになります。

同じ階層内で純粋に「上から◯番目」にスタイルを指定したいときは「:nth-child」
同じ階層内で「◯番目の△△」あるいは「△△の◯番目」にスタイルを指定したいときは「:nth-of-type」

⑧ :empty擬似クラス

<body>
　<ul>
　　<li>項目</li>
　　<li>項目</li>
　　<li></li>
　　<li>項目</li>
　　<li>項目</li>
　</ul>
</body>

上のように中身が空の要素に対して、スタイルを適用したいときは「 :empty」擬似クラスを使用します。上のようなHTMLの場合、以下のようなCSSになります。

li :empty {
　background : pink ;
}

なお :empty擬似クラスを使う上で注意点がいくつかあります。

半角空白や改行があると空とみなされず、スタイルが適用されない

コメントだけであれば空とみなされ、スタイルが適用される

⑨ :not擬似クラス

例えば「空ではない要素に対して背景色を付けたい」というとき、以下のようなCSSになります。

li :not( :empty) {
　background : pink ;
}

少しややこしいですが、「 :not」は否定を意味する擬似クラスです。以下のような使い方もあります。

body :not(p) {
　background : pink ;
}

上のように書くと、<p>ではないところにピンク色の背景色が付けられます。

body :not(div) :not(span) {
　background : pink ;
}

上のように書くと、<div>または<span>ではないところにピンク色の背景色が付けられます。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

【プログラミング独学17日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

cursor : pointer ;は :hoverに記述すべきではないのか？
「background : pink」？「-color」は？
: empty擬似クラスを使わなくても:nth-childではだめなのか？

cursor : pointer ;は :hoverに記述すべきではないのか？

:hover擬似クラスのところで、ボタンにマウスカーソルが乗ったとき、マウスカーソルの形を指の形に変えたいと思った場合。「cursor : pointer;」を書き加えるということはわかったのですが、なぜ以下に書き加えるのか理解できませんでした。

.btn {
　width : 100px ;
　background-color : skyblue ;
　text-align : center ;
　padding : 4px ;
　color : white ;
　cursor : pointer;
}

カーソルが指の形に変わってほしいのはホバー時だし、なぜ「.btn:hover」の方ではなく初期表示時のデザインである「.btn」の方に書いたのか・・・？他の方も質問していましたが、先生の回答は以下のような内容でした。

「.btn:hover」の方に書いてもどちらでも良いです。ただ例えばボタンが2つ存在しており片方が無効であるときなど、「こちらはホバー時に指の形にしてほしいけどこちらは無効なのでしてほしくない」ということもあります。そのようなときを考慮すると、大元のデザインである「.btn」の方に書いておいた方が便利です。

参考ドットインストール

なんとなくわかりました。

「background : pink」？「-color」は？

順番に関する擬似クラスのところで、先生が以下のように打っていました。

background : pink ;

いつも以下のように打つのになぜ？と思いました。

background-color : pink ;

そこでMDNで調べてわかりました。backgroundは一括指定プロパティでしたね。ただ今回のように、1つの値を指定するときに一括指定プロパティを使ったのは初めて見たのですんなり入らなかったようです。指定が1つでも一括指定プロパティって使って良いのかな？良いと思いますが、教科書的には邪道なやり方であるような・・・。ドットインストールではいつもしっかり教科書に沿ったやり方というか、丁寧なやり方を指導してくださるので珍しいですね。

指定が1つでも一括指定プロパティを使って良いなら毎回そうするんですが。と思い再度MDNを見てみると、問題無さそうなので今後はそのように書いていきたいと思います。

: empty擬似クラスを使わなくても:nth-childではだめなのか？

そもそも「中身が空の要素」という状況がよくわからず、わざわざ : empty擬似クラスを使わなくても :nth-childで良くない？と思いました。実際にCSSを書き換えてみると、:nth-childでもスタイルが正しく反映されました。

ただ例えばアンケートなどで、中身が無い部分に対して1つ1つ:nth-childでスタイルを指定していると、アンケートが1行追加されて1つ1つ手作業で修正しなければいけない・・・ということが起こります。そのようなときに中身が空のところは: empty擬似クラスで指定しておけば便利ですね。まあまあすっきりしました。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール

2022-03-26FREELANCE,WORDPRESS/WEB

Posted by miho