Css3セレクタ一覧

目次

セレクタを使う

セレクタとは、クラスやIDを決める際の名前の部分「.hoge」の部分を指します。

新しいセレクタ一覧

それではスタイルしーとのセレクタの紹介をしていきます!!

セレクタ名[href$=”.link”]

表示サンプル(セレクタ名[href$=”.link”])

セレクタ名[foo*=”bar”]

表示サンプル(セレクタ名[foo*=”bar”] )

セレクタ名[foo*=”bar”]

表示サンプル(セレクタ名[foo*=”bar”])

セレクタ名:nth-child(n)

表示サンプル(セレクタ名:nth-child(n))
みかん 10箱
りんご 20盛
バナナ 50房
メロン 8個
すいか 2玉
レモン 20袋
ライチ 80個
キウイ 50個
ぶどう 30房

セレクタ名:nth-last-child(an+b)

表示サンプル(セレクタ名:nth-last-child(an+b))
みかん 10箱
りんご 20盛
バナナ 50房
メロン 8個
すいか 2玉
レモン 20袋
ライチ 80個
キウイ 50個
ぶどう 30房

セレクタ名:nth-of-type(n)

表示サンプル(セレクタ名:nth-of-type(n)))

p:nth-child(4)の場合

今日の天気

今日は晴れでしょう。

日差しが強くなるでしょう。

日傘や帽子の使用をおすすめします。

明日の天気

明日はでしょう。

気温が低くなるでしょう。

長袖の上着があると良いでしょう。

p:nth-of-type(4)の場合

今日の天気

今日は晴れでしょう。

日差しが強くなるでしょう。

日傘や帽子の使用をおすすめします。

明日の天気

明日はでしょう。

気温が低くなるでしょう。

長袖の上着があると良いでしょう。

セレクタ名:first-of-type

表示サンプル(セレクタ名:first-of-type)

p:first-childの場合

今日の天気

今日は晴れでしょう。

日差しが強くなるでしょう。

日傘や帽子の使用をおすすめします。

明日の天気

明日はでしょう。

気温が低くなるでしょう。

長袖の上着があると良いでしょう。

p:first-of-typeの場合

今日の天気

今日は晴れでしょう。

日差しが強くなるでしょう。

日傘や帽子の使用をおすすめします。

明日の天気

明日はでしょう。

気温が低くなるでしょう。

長袖の上着があると良いでしょう。

セレクタ名:only-child

表示サンプル(セレクタ名:only-child)

明日はでしょう。
気温が低くなるでしょう。
長袖の上着があると良いでしょう。

明日はでしょう。
気温が低くなるでしょう。
長袖の上着があると良いでしょう。

セレクタ名:empty

要素内容が空となるセレクタ要素にCssを適用する

表示サンプル(セレクタ名:empty)
みかん
りんご 20盛
バナナ 50房
メロン 8個
すいか
レモン 20袋
ライチ 80個
ぶどう 30房

セレクタ名:target

リンクのターゲット先のセレクタにCssを適用

表示サンプル(セレクタ名:target )

今日のお天気

今日は晴れです。

明日のお天気

明日はです。

セレクタ名:target

リンクのターゲット先のセレクタにCssを適用

表示サンプル(セレクタ名:target )

今日のお天気

今日は晴れです。

明日のお天気

明日はです。

セレクタ名:first-letter

ブロックレベルセレクタの最初の文字を対象にCSSを適用

表示サンプル(セレクタ名:first-letter)

今日のお天気

関東地方は、晴れです。
中部地方は、曇りです。
関西地方は、です。

明日のお天気

関東地方は、曇りです。
中部地方は、です。
関西地方は、晴れです。

参考サイト:HTMLクイックリファレンス

Commentsこの記事についたコメント

%d人のブロガーが「いいね」をつけました。