*

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

 

公開日: : ノウハウ

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。

例えばリストの3番目の要素なら次のように指定します。

li:nth-child(3){

}

偶数番目の要素だけ指定したいなら…

li:nth-child(even){

}

奇数番目の要素だけ指定したいなら…

li:nth-child(odd){

}

3の倍数だけ指定したいなら…

li:nth-child(3n){

}

○の倍数以外を指定するには?

ここで困ったのが3の倍数以外だけを指定するならどうすればいいのか?という事でした。3列並びのボックスのマージン指定に役立ちます。

上図のように、1,2,4,5,7,8,10,11番目の要素だけを指定したいのです。中学校の数学で学んだ数列の授業を思い出します。

3の倍数以外の数式を考えていましたが、簡単に考えれば3の倍数以外をそのまま言えればいいわけです。CSS の世界にも否定を表す擬似クラス「:not()」があります。これを応用して3の倍数以外を表現してみます。

li:not(:nth-child(3n)){

}

これが3の倍数以外を指定する方法です。3の倍数を意味する「:nth-child(3n)」全体を否定擬似クラス「:not()」で囲んでいます。見た目通り3の倍数以外という事になります。

おわりに

あまり使わない指定方法ですが、頭の片隅に置いておけばいつかは役に立つ事も来るでしょう。

  • Pocket

おすすめトピックス

関連記事

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々登場するもので、小説、雑誌、文書など様々な場面に登場するものです。三点リーダーとはすなわち「…」、点が3つ並んだものです。普段のメールなどの会話でも言葉を省略 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
安曇野市でSTERN GELATO FACTORYのパティシエ本気の「ピュアソフト」

STERN GELATO FACTORY(シュテルンジェラート

安曇野市で安くてボリュームたっぷりの蕎麦「そばの庵はや田」

長野県安曇野市にあるお蕎麦屋さん「そばの庵はや田」へ行ってきま

Photoshopで行間を1ptにしても詰められない時の対処法

Photoshop の文字ツールで文字を入力して、文字パネルの

夜の彦根城を間近で見れる1日だけの特別な日「彦根城夜楽2019」

夜の彦根城を間近で見られる日が1年に1回だけあります。その1日

JA士幌町のスイートコーンとミルクの味わい「北海道のこだわりプリン」

士幌町の北海道のこだわりプリンをいただいて、とても美味しかった

→もっと見る