More control over :nth-child() selections with the of S syntax - Chrome Developers

2023/03/08 10 users syntax ntH Chrome Developers

# The :nth-child() and :nth-last-child() pseudo-class selectorsWith the :nth-child() pseudo-class selector it is possible to select Elements in the DOM by their index. Using the An+B microsyntax you get fine control over which elements you want to select. :nth-child(2): Select the 2nd child.:nth-... 続きを読む

Chrome 111のココに注目！ 三角関数やスタイルクエリなどCSSに関する新機能がけっこうたくさんサポートされました

2023/03/08 15 users CSS 三角関数 スタイルクエリ ココ cos

本日リリースされたChrome 111で、CSSに関する新機能がけっこうたくさんサポートされたので、紹介します。 sin(), cos(), tan()などの三角関数をはじめ、親要素のスタイルに応じて子要素のスタイルを適用できるスタイルクエリ、:nth-child()で「of S」構文が使用できるようになったり、他にもいろいろ盛りだくさんです。... 続きを読む

CSSのnth-childとnth-of-typeについて基本から学ぼう | Stocker.jp / diary

2019/05/06 17 users Stocker.jp diary CSS 基本

この記事について この記事は、スマートフォン時代のWebデザインスクール や スマートフォン時代のWebコーディングスクール 初回体験レッスンなどをお手伝いして頂いている「やのう まり絵」さんによる寄稿記事です。 フリーランスの「やのう まり絵（@maYrie86）」と申します。普段、Webサイト制作を行っておりWebデザ... 続きを読む

CSSの:nth-childと:nth-last-child擬似クラスの使用例 | NxWorld

2016/01/18 67 users NxWorld 備忘録 CSS 擬似クラス 一瞬

今更な内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。CSSの擬似クラスにある「:nth-child」と「:nth-last-child」の使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやソースは... 続きを読む

CSSの「:nth-child」をマスターするための図解いろいろ | IDEA*IDEA

2011/06/17 160 users useful IDEA CSS-Tricks CSS 基本

あ、これはいいかも。CSSの「:nth-child」を理解するための図がいろいろ紹介されていましたよ。 ↑ ここらへんは基本。 ↑ こんなのとか。 ↑ こういうのも。 ↑ にゃるほど。 図解がすんごくわかりやすいですね。一度目を通しておくと良さそうです。こちらからどうぞ。 » Useful :nth-child Recipes | CSS-Tricks 続きを読む

CSS3 で3の倍数の要素にスタイルを適用する | ウェブル

2011/05/24 43 users 倍数 ウェブル 要素 CSS3 HTML

画像のように3の倍数の時だけ何かスタイルを適用したい場合 CSS3 の nth-child() 疑似クラスを使えば簡単に解決することができます。 HTML 1 2 3 4 5 6 7 8 9 10 11 リスト1 リスト2 リスト3 リスト4 リスト5 リスト6 リスト7 続きを読む

[jQuery] プラグインを使わずに少しのコードを使ってテーブルのセルを分かりやすくハイライトする - かちびと.net

2011/04/01 93 users jQuery セル Tips 疑似クラス net

現在見ているテーブルのセルが 分かりやすいようにマウスオーバー で縦と横のセルをハイライトするよう にするTipsです。css3の:nth-child() 疑似クラスを、jQueryを使用してクロス ブラウザに対応させます。 という訳でメモ書き。探したらプラグインを使うものばかりだったのですが、これだけの為にプラグイン使うのは正直アレなので簡単なコードでハイライトできるようなものを。サンプルマウス... 続きを読む