演習課題「兄弟セレクタを試してみよう」
現在、兄弟セレクタを使ってCSSのルールを適用しようとしています。div要素の直後に記述した同じ階層にあるp要素の先頭に*が表示されるよう変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃11:兄弟セレクタ
このチャプターでは、兄弟セレクタについて学習します。
兄弟セレクタは、あるドキュメントと同じ階層にあるドキュメントを指定したい場合に指定するセレクタです。
2つのセレクタの間に+もしくは~の結合子を挿入する形で記述します。
また、セレクタとして以前に学習した混合セレクタも記述できます。
それぞれ要素をAとBとしたとき、A + B {プロパティ: 値;}
と記述した場合は、Aの直後に記述した同じ階層にあるBを指定します。
これを、兄弟セレクタの中でも隣接セレクタと言います。A ~ B {プロパティ: 値;}
と記述した場合は、Aの直後に記述した同じ階層にあるすべてのBを指定します。
これを、間接セレクタと言います。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/CSS/Descendant_combinator
@charset "UTF-8";
div + p::before {content: "・";}