これは #demo1 な h3要素
これは p要素。p要素と h3要素は article要素の中に入っています。
擬似クラス :target :target-within のサンプル
これは p要素。p要素と h3要素は article要素の中に入っています。
これは p要素。p要素と h3要素は article要素の中に入っています。
HTMLはこちら。
<ol>
<li><a href="#demo1">#demo1へのリンク元</a></li>
<li><a href="#demo2">#demo2へのリンク元</a></li>
<li><a href="#">#へのリンク元(このページ全体がリンク先です)</a></li>
</ol>
<article>
<h3 id="demo1">これは <span>#demo1</span> な h3要素</h3>
<p>これは p要素。p要素と h3要素は article要素の中に入っています。</p>
</article>
<article>
<h3 id="demo2">これは <span>#demo2</span> な h3要素</h3>
<p>これは p要素。p要素と h3要素は article要素の中に入っています。</p>
</article>
CSSはこちら。
h3:target {
background-color: #e8ffd1;
}
h3:target::before, .sample1 h3:target::after {
content: "★";
color: sienna;
margin: 0 .3em;
}
h3:target span {
color: sienna;
}
これは p要素。p要素と h3要素は article要素の中に入っています。
これは p要素。p要素と h3要素は article要素の中に入っています。
HTMLは上のサンプルと(ほぼ)同じです。
CSSは、上のCSSにこの指定を足しました。
article:target-within {
background-color: #ffffd6; /*articleの背景に淡い黄色を指定しました*/
}