このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

スマフォンサイトで使える CSS3 nth-child() 疑似クラス

スマートフォン

2011.02.20

この記事は最終更新日から1年以上が経過しています。

使えるセレクタシリーズ第1弾。nth-child() を紹介します。

w3c

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

いやぁ、こちらを参考にしていきたいのですが、

英語だし、難しいですね。

では簡単に。

HTML

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

CSS

ul > li:nth-child(4){
color:#F00;
font-weight:bold;
}

いやぁ便利です。

このように、nth-child(値)を入れる事によって、

該当するn番目の子要素を指定できます。

また、last-childを組み合わせたり

CSS

ul > li:last-child{
color:#00F;
}

ul > li:nth-child(even){
color:#00F;
}

奇数番目だけ変更したり、

ul > li:nth-child(odd){
color:#F00;
font-weight:bold;
}

偶数番目のみ変更

また、

ul > li:nth-child(4n+1){
color:#F00;
font-weight:bold;
}

このように、(4n+1)と記述すると、

このように、4つ置きの1,5,9,13番目を指定する事が出来ます。

いやはや。

便利ですね。

Comment

Related Article

「Band’s」スマートフォン版リリースしました!

2015.06.24

スマートフォンサイト制作における SCSSディレクトリ構成、Class命名について

2014.06.01

ドラクエモンスターズ スーパーライト ジェム 50,000円分 無料GET!! と謳っている【manekin】(マネキン)をやってみた!

2014.05.24

HTML5 WebビューApp ソーシャルゲーム制作時のまとめ

2013.08.17

スマートフォン タッチイベント、距離、速さ等確認ページ

2013.03.07

weinreでiPhone/Androidをリモートデバック

2013.01.27

translateプロパティでAndroid,iPhone端末で画像がちらつく件

2012.09.13

CSS3 アイコン作成 背景指定1つ 光彩グラデーションの表現

2012.05.19

スマートフォン JavaScript タッチ、フリックイベント実装その2 「ボールを投げる」

2012.02.18

スマートフォン JavaScript タッチ、フリックイベント実装

2012.02.18

CATEGORY LIST

LATEST NEWS

Mac 容量足りない問題は、外付けSSDで快適に解決!おすすめ外付けSSD

mac

2024.10.16

Z80エミュレータ- EMUZ80の組み立て

電子工作

2024.10.13

Mac VSCodeで、SFML C++開発環境を作る。

C++

2024.09.09

Rust-SDL2 examplesをすべて試す

Rust

2024.09.01

JavaScriptで、DOMを放り投げる処理

JavaScript

2024.07.27

Rustで創る MOS 6502 CPU その2

Rust

2024.07.23

Rustで創る MOS 6502 CPU その1

Rust

2024.07.19

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US