ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/11/30
NEW
【週刊ドットインストール】 サービス開始12周年!、Tailwind CSS入門リリース、256timesにて回答ボット稼働開始
PREMIUM
【旧版】詳解CSS セレクター編
CSSのセレクターを使って要素を柔軟に指定するための方法を学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
CSS入門 セレクター編
CSSセレクターのさまざまな書き方について詳しく学んでいきます。
0%
動画レッスン一覧
(12)
質問と回答
(83)
未完了
#01 CSSの基本セレクターを学んでいこう
(01:40)
無料公開中
CSS記法の復習
基本セレクターの種類
未完了
#02 要素型セレクター、classセレクターを使おう
(02:39)
無料公開中
要素型セレクター
classセレクター
未完了
#03 idセレクター、全称セレクターを使おう
(02:08)
無料公開中
idセレクター
全称セレクター
未完了
#04 属性セレクターを使ってみよう
(02:43)
属性セレクター
完全一致
前方一致
後方一致
部分一致
未完了
#05 セレクターを組み合わせてみよう
(02:53)
セレクタの組み合わせ
a, b
ab
a > b
a b
a + b
未完了
#06 ::before、::after擬似要素を使おう
(02:51)
::before
::after
カスタムデータ属性との併用
未完了
#07 :hover擬似クラスを使ってみよう
(02:33)
擬似クラスと擬似要素の違い
:hover
cursor
未完了
#08 :nth-child擬似クラスを使おう
(02:38)
:nth-child()
:first-child
:last-child
未完了
#09 :nth-of-type擬似クラスを使おう
(02:35)
:nth-child()と:nth-of-type()の違い
:nth-of-type()
:first-of-type
:last-of-type
未完了
#10 :empty、:not擬似クラスを使おう
(02:19)
:empty
:not()
未完了
#11 詳細度を計算してみよう
(02:49)
詳細度とは
詳細度の計算方法
未完了
#12 優先されるスタイルを確認しよう
(02:24)
詳細度の挙動確認
style属性
!important
#01 CSSの基本セレクターを学んでいこう
VS Code に一つ戻る機能はありますか?
2022年1月27日
classセレクターとidセレクターはどう使い分けるのですか?
2022年1月27日
#02 要素型セレクター、classセレクターを使おう
head が赤く表示されてしまいます
2022年9月24日
! マークを入力すると黄色く囲われてしまいます
2022年1月27日
セレクターとは何ですか?
2022年1月27日
<!-- --> は何を意味しているのですか?
2022年1月27日
class = "info title" の title が何なのか理解できません
2022年1月27日
複数の class 属性を付けた際、どのようにスタイルを指定すればよいですか?
2022年1月27日
divを使って書き換えても問題ないですか?
2022年1月27日
スタイルを2つに分ける理由はなんですか?
2022年1月27日
"info title"のセレクタはどう表現するのですか?
2022年1月27日
#03 idセレクター、全称セレクターを使おう
* と body の違いはなんですか?
2022年1月27日
全称セレクターと html を指定したときの違いはありますか?
2022年1月27日
id の使いどころがわかりません
2022年1月27日
idで設定した識別子が2つ目にも使えたのですが...
2022年1月27日
idとclassはどう使い分けるのですか?
2022年1月27日
全称セレクターと:root疑似クラスの違いは?
2022年1月27日
#04 属性セレクターを使ってみよう
山のような記号はキーボードのどこにありますか?
2022年1月27日
部分一致と前方一致の使い分けを教えてください
2022年1月27日
完全一致とはなんですか?
2022年1月27日
VS Code の 2 カラム表示ができなくなりました
2022年1月27日
「存在の有無」とはどういう意味ですか?
2022年1月27日
後方一致がうまくいきません
2022年1月27日
スタイルが反映されません
2022年1月27日
#05 セレクターを組み合わせてみよう
abという書き方が MDN で見つかりません
2022年9月3日
ab と a b の違いはなんですか?
2022年7月9日
1 つ目の p が無視されるのはなぜですか?
2022年2月10日
h1 > p と書いても、 CSS が適用されません
2022年1月27日
h1.info とはなんですか?
2022年1月27日
HTML のクラス名は ttl info なのに、なぜ CSS セレクタは .info だけなのですか?
2022年1月27日
main>h1,p とすると section 内の p にまで適用されるのは何故でしょうか?
2022年1月27日
a + b の書き方では a も選択に含まれるのですか?
2022年1月27日
p + p はよく使われるのですか?
2022年1月27日
p + p + p といった書き方もできますか?
2022年1月27日
p + pについて教えて下さい
2022年1月27日
p + pについて教えて下さい
2022年1月27日
+の使い方がよくわかりません
2022年1月27日
#06 ::before、::after擬似要素を使おう
h1, h2 :: before{} という書き方は正しいですか?
2022年1月27日
カスタムデータ属性とはなんですか?
2022年1月27日
コンピュータが subtitle などの英語を理解し、サブタイトル的要素を作っているのですか?
2022年1月27日
attr() の使い方がわかりません
2022年1月27日
値を""で囲うプロパティについて教えて下さい
2022年1月27日
必須であるcontent属性が指定されていないのはなぜですか?
2022年1月27日
擬似要素の使いどころがわかりません
2022年1月27日
"と'はどう使い分けるのですか?
2022年1月27日
content属性、カスタムデータ属性やattrはどう使うのですか?
2022年1月27日
#07 :hover擬似クラスを使ってみよう
btn クラスをつけた div 要素は実際にボタンとして機能させられるのですか?
2022年1月27日
buttonを使ってリンクを貼りたい
2022年1月27日
「cursor: pointer」は「btn:hover」の方に書いてもいいのですか?
2022年1月27日
text-alignが反応しない、ボタンが表示されない
2022年1月27日
#08 :nth-child擬似クラスを使おう
p:last-child の挙動がわかりません
2022年8月23日
main > :last-child が期待通りに動きません
2022年5月24日
複数の要素に CSS を当てたい場合はどのように記述すればいいでしょうか?
2022年6月5日
main > :nth-child(3) の > は必要なのですか?
2022年1月27日
nth-child を使わずに、一つ一つ class で指定すればよいのではありませんか?
2022年1月27日
同じ階層に並んで”いない”要素はどう書いたらいいですか?
2022年1月27日
ピンク、青、緑、ピンク、青、緑...のように背景色をつけたいです
2022年1月27日
#09 :nth-of-type擬似クラスを使おう
h2:nth-of-type(odd) としても、偶数番目の h2 に背景色が設定されます
2022年5月24日
:nth-child と :nth-of-type の違いがわかりません
2022年1月27日
:nth-of-type(even)がうまくいかない
2022年1月27日
#10 :empty、:not擬似クラスを使おう
特定のクラスの li の empty に背景色をつけるにはどうすればよいですか?
2022年1月27日
article > li:empty に色がつきません
2022年1月27日
background を指定したのに背景色がつかない時があるのはなぜですか?
2022年1月27日
リストの・にも背景色がついてしまいます
2022年1月27日
セレクターを渡すとはどういうことでしょうか?
2022年1月27日
CSS のセレクターとはどの箇所を指しますか?
2022年1月27日
:notはどういうときに使いますか?
2022年1月27日
:emptyはどういうときに使うのですか?
2022年1月27日
#11 詳細度を計算してみよう
なぜ id 属性とクラス属性を併用しているのですか?
2022年1月27日
section#about > h1 と #about > h1 の違いはありますか?
2022年1月27日
セレクターを『h1#main.title box』としないのはなぜですか?
2022年1月27日
id 属性は文書内で 2 回使ってもよいのですか?
2022年1月27日
color: pink が反応しません
2022年1月27日
セレクターの書き方が分かりません
2022年1月27日
#12 優先されるスタイルを確認しよう
詳細度という概念はなぜ存在するのですか?
2022年2月18日
HTML で class="title box" とクラス指定すると CSS では #main."title box" となるのではないでしょうか?
2022年1月27日
!important を指定したスタイルが適用されません
2022年1月27日
スタイルの優先度がうまく働きません
2022年1月27日
同じ意味のセレクターを複数書く場面とは?
2022年1月27日
セレクターにいろいろな種類があるのはなぜですか?
2022年1月27日
idは一度しか使えないのでは?
2022年1月27日
!importantをつけた箇所が黄色になりません
2022年1月27日
セレクタにクラスの一部しか書かれていないようですが、それでいいのですか?
2022年1月27日
リリース情報(note)
『詳解CSS セレクター編』をリリースしました。
関連キーワード
基礎講座
(386)
初心者向け
(379)
CSS3
(20)
ウェブサイト構築
(155)
詳細情報
最終更新日
2020年1月9日
バージョン情報
Chrome 78.0 / Visual Studio Code 1.38.0