元ニート中卒派遣30代ブサメン童貞のブログ

みんなが存在に疑問を感じている「元ニート、中卒、派遣、30歳超えのブサメン童貞」が実際に生息し、そして「どうやって生きてるか」を晒していくブログ

ユーザスタイルシートでデザイン改造する 〜擬似クラス編〜

f:id:design1983:20180726235557p:plain

Safariを使ってクラウド上で仕事をしているのですが、クラウドアプリケーションのデザインが糞すぎて我慢できません。Webインスペクタを使いながらユーザスタイルシートで専用ツールをオシャンティーでシャレオッティにするための個人的なメモ。あ、我慢できないのは糞じゃないよ。

あくまで自分用ですが、あとで自分で見て混乱しないようになるべくわかりやすい解説を心がけます。もうね、みんな小難しいこと書きすぎ。

n番目の要素にだけ適用させる擬似クラス

いろいろある擬似クラスはおしなべて便利ですが、その中でも一番便利であり、一番意味がよくわからないという厄介者をピックアップ。文字で書くと意味を理解するのは結構大変なので、慣れと感覚とコピペ力でなんとかしましょう。

HTMLソースは以下を基にします。

<div>
    <h3>小見出し1</h3>
    <p>段落1</p>
    <p>段落2</p>
    <h3>小見出し2</h3>
    <p>段落3</p>
    <p>段落4</p>
</div>

実際の挙動

f:id:design1983:20180725231131p:plain

:nth-child(n)

親要素のうち、n番目の子要素に適用させます。今回は親要素<div>のうち、3番目の子要素<p>の文字色をredにする指定です。

div p:nth-child(3) {
color: red;
}

:nth-of-type(n)

親要素内で兄弟関係にある子要素のうち、n番目の子要素に適用させます。今回は親要素<div>内で兄弟関係にある子要素<p>のうち、3番目の子要素<p>の文字色をblueにする指定です。

div p:nth-of-type(3) {
color: blue;
}

違いがよくわからない人は、ここでもう一回HTMLに戻ってみてください。3番目の子要素<p>の意味合いが微妙に異なっていることに気がつくと思います。

  • 親要素<div>の子要素のうち、<h3><p>に関係なく、とにかく上から数えて3番目の子要素に適用しているのが:nth-child(n)
  • 親要素<div>の子要素<p>のうち、上から数えて3番目の<p>に適用しているのが:nth-of-type(n)

もうマヨいらな〜い。