Css3セレクタ一覧

Posted on by

セレクタを使う

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

新しいセレクタ一覧

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

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

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

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

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





みかん10箱


りんご20盛


バナナ50房


メロン8個


すいか2玉


レモン20袋


ライチ80個


キウイ50個


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

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





みかん10箱


りんご20盛


バナナ50房


メロン8個


すいか2玉


レモン20袋


ライチ80個


キウイ50個


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

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





p:nth-child(4)の場合


今日の天気


今日は晴れでしょう。


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


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


明日の天気


明日は雨でしょう。


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


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







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


今日の天気


今日は晴れでしょう。


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


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


明日の天気


明日は雨でしょう。


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


長袖の上着があると良いでしょう。
表示サンプル(セレクタ名:nth-of-type(n)))

p:nth-child(4)の場合

今日の天気

今日は晴れでしょう。

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

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

明日の天気

明日は雨でしょう。

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

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

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

今日の天気

今日は晴れでしょう。

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

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

明日の天気

明日は雨でしょう。

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

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

セレクタ名:first-of-type





p:first-childの場合


今日の天気


今日は晴れでしょう。


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


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


明日の天気


明日は雨でしょう。


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


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







p:first-of-typeの場合


今日の天気


今日は晴れでしょう。


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


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


明日の天気


明日は雨でしょう。


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


長袖の上着があると良いでしょう。
表示サンプル(セレクタ名:first-of-type)

p:first-childの場合

今日の天気

今日は晴れでしょう。

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

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

明日の天気

明日は雨でしょう。

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

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

p:first-of-typeの場合

今日の天気

今日は晴れでしょう。

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

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

明日の天気

明日は雨でしょう。

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

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

セレクタ名:only-child






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





明日は雨でしょう。
気温が低くなるでしょう。
長袖の上着があると良いでしょう。
表示サンプル(セレクタ名:only-child)

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

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

セレクタ名:empty

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





みかん


りんご20盛


バナナ50房


メロン8個


すいか


レモン20袋


ライチ80個




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

セレクタ名:target

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







今日のお天気


今日は晴れです。







明日のお天気


明日は雨です。
表示サンプル(セレクタ名:target )

今日のお天気

今日は晴れです。

明日のお天気

明日は雨です。

セレクタ名:target

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







今日のお天気


今日は晴れです。







明日のお天気


明日は雨です。
表示サンプル(セレクタ名:target )

今日のお天気

今日は晴れです。

明日のお天気

明日は雨です。

セレクタ名:first-letter

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



今日のお天気



関東地方は、晴れです。

中部地方は、曇りです。

関西地方は、雨です。




明日のお天気



関東地方は、曇りです。

中部地方は、雨です。

関西地方は、晴れです。
表示サンプル(セレクタ名:first-letter)

今日のお天気

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

明日のお天気

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

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