Css3セレクタ一覧
セレクタを使う
セレクタとは、クラスや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クイックリファレンス
