:target 疑似クラス | 実例 CSS プロパティ・セレクタ (3)

:target 疑似クラスサンプルプログラムコードページ

情報：

:target

<!DOCTYPE html>
<html>
<head>
<title>CSS :target 疑似クラス Example</title>
<style>
.modal {
  display: none;
}
.modal:target {
  position: absolute;
  left: 0;
  top: -35em;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: pink;
}
.modal .close {
  position: relative;
  display: block;
}
.modal .close::after {
  right: -1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  color: white;
  content: "×";
  cursor: pointer;
}
.modal .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}
</style>
</head>
<body>
<h1>:target 疑似クラス CSS プロパティ Example</h1>
<ul>
  <li><a href="#webref1">例1を開く</a></li>
  <li><a href="#webref2">例2を開く</a></li>
</ul>
<div class="modal" id="webref1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>（例 1）モーダルウィンドウ（英: modal window）は、コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの</figcaption>
  </figure>
</div>
<div class="modal" id="webref2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>（例 2）モーダルウィンドウ（英: modal window）は、コンピュータアプリケーションソフトウェアのユーザインタフェース設計において、何らかのウィンドウの子ウィンドウとして生成されるサブ要素のうち、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないもの</figcaption>
  </figure>
</div>
</body>
</html>

:target 疑似クラスサンプル実行結果

：:target 疑似クラス ・ :target 疑似クラス, コード関連記事

全てリセット

:target 疑似クラス | 実例 DEMO CSS プロパティ・セレクタ (3) | 書き方 — :target 疑似クラス | 実例 CSS プロパティ・セレクタ (3) – WebRef

2018-06-05css-demo

:target 疑似クラス | 実例 DEMO CSS プロパティ・セレクタ (3) | 書き方

:target 疑似クラス サンプル プログラム コード ページ

Html

Glossary

PHP

JavaScript

JQuery

CSS

:target 疑似クラスサンプルプログラムコードページ