*

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

おすすめトピックス

関連記事

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

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

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

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

著者について

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

フォローはこちら

       

       
Premiere Elementsで動画の一部を切り抜きトリミングする方法

せっかく動画を撮影したけど、肝心な部分は動画の中央部分だけでま

北海道チーズおかき
チーズの旨味が超濃厚!YOSHIMIの「北海道チーズおかき」

北海道に本社を置き、レストラン事業や製菓事業を行っている YO

無効なURLです。
エックスサーバーへ移転時にデータベースをインポートしたら「無効なURLです。」

高速で安定度の高いと評判のエックスサーバーへサイトの移転を行い

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

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だ

北のちーずボー
北海道産チーズのスティックケーキ「北のちーずボー」

新千歳空港のお土産店で販売されていた「北のちーずボー」を買って

→もっと見る