【CSS】:targetとは何か？使い方やメリット、注意点を実例で解説（初心者向け、わかりやすい）

対象要素:target{ 処理 }

<div id="originalName">内容</div> 

<a href="#originalName">アンカーテキスト</a> 

<h2>目次</h2>
<ul>
 <li><a href="#first">１つ目の内容</a></li>
 <li><a href="#second">２つ目の内容</a></li>
 <li><a href="#nolink">飛び先がない場合</a></li>
</ul>

<h2>目次</h2>
<ul>
 <li><a href="#first">１つ目の内容</a></li>
 <li><a href="#second">２つ目の内容</a></li>
 <li><a href="#nolink">飛び先がない場合</a></li>
</ul>

<div id="first">
  <p>1つ目の内容です</p>
  <p>あなたは今、<span>一番上</span>のリンクをクリックしました</p>
</div>


<div id="second">
  <p>2つ目の内容です</p>
  <p>あなたは今、<span>2つ目の</span>のリンクをクリックしました</p>
</div>

div{
  margin: 50px 20px 10px;
  padding: 10px;
  border: 1px dotted gray;
  border-radius: 8px;
}

div{
  margin: 50px 20px 10px;
  padding: 10px;
  border: 1px dotted gray;
  border-radius: 8px;
}

div:target{
  background-color: #ffffa5;
  border: 5px gold solid;
}

div:target span{
  color: blue;
  font-size: 20px;
  font-weight: bold;
}

<p><a href="#first">●ページ内リンクです</a></p>


<div id="first">
  <p>ページ内リンクのクリックでハイライトされます。</p>
  
  <div class="secret">
    <p>このエリアはリンクをクリックしたときのみ表示します。</p>
    <p>非表示にするには<a href="#">こちら</a>をクリックしてください</p>
  </div>
</div>

<a href="#">こちら</a>

div{
  margin: 50px 20px 10px;
  padding: 10px;
  border: 1px dotted gray;
  border-radius: 8px;
}

.secret{
  display: none;
}

div{
  margin: 50px 20px 10px;
  padding: 10px;
  border: 1px dotted gray;
  border-radius: 8px;
}

.secret{
  display: none;
}

div:target{
  background-color: #ffffa5;
  border: 5px gold solid;
}

div:target span{
  color: blue;
  font-size: 20px;
  font-weight: bold;
}

#first:target .secret{
  display: block;
  background-color: white;
}

<a href="#modal-element">モーダルを開く</a>

<div class="modal" id="modal-element">
  <div class="modal-box">
    <a href="#" class="close"></a>
    <p>疑似クラス:targetを使ってモーダルを表示しています。</p>
  </div>
</div>

<a href="#" class="close"></a>

/* モーダルはデフォルト非表示 */
.modal {
  display: none;
}

/* モーダルの位置調整。画面中央に表示する */
.modal:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* モーダルの中身（ピンク色の部分） */
.modal-box p {
  width: 80%;
  position: relative;
  padding: 40px;
  background-color: lightpink;
  border-radius: 10px;
}


/* 画面を黒く覆う部分 */
.modal .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}


/* 閉じるボタンの位置調整のため */
.modal .close {
  position: relative;
  /* display: block; */
}


/* 閉じるボタン */
.modal .close::after {
  right: -30rem;
  top: 3px;
  width: 30px;
  height: 30px;
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}