ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/01
NEW
『JavaScript入門 DOM編』をリリースしました
2023/06/01
NEW
週刊ドットインストール(2023/06/01号)を更新しました!
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日
ギャラリー
このレッスンについて
最終更新日
2020年1月9日
バージョン情報
Chrome 78.0 / Visual Studio Code 1.38.0
関連キーワード
(4)
基礎講座
(369)
初心者向け
(368)
CSS3
(20)
ウェブサイト構築
(155)
このレッスンを共有する