html - CSS で onclick 効果を使用できますか?

Question

クリックで変更したい画像要素があります。

<img id="btnLeft">

これは機能します：

#btnLeft:hover {
    width:70px;
    height:74px;
}

しかし、私が必要とするのは:

#btnLeft:onclick {
    width:70px;
    height:74px;
}

しかし、明らかにうまくいきません。onclickCSS で (つまり、JavaScript を使用せずに) 動作させることはまったく可能ですか?

score 413 · Accepted Answer

あなたが得る最も近いものは:active：

#btnLeft:active {
    width: 70px;
    height: 74px;
}

ただし、これはマウスボタンが押されている場合にのみスタイルを適用します。スタイルを適用してonclickで適用し続ける唯一の方法は、JavaScriptを少し使用することです。

score 90 · Accepted Answer

疑似クラス:targetを使用してクリックイベントを模倣できます。例を挙げましょう。

#something {
  display: none;
}

#something:target {
  display: block;
}

<a href="#something">Show</a>
<div id="something">Bingo!</div>

これがどのように見えるかです：http://jsfiddle.net/TYhnb/

注意すべき点として、これはハイパーリンクに限定されているため、ボタンなどのハイパーリンク以外で使用する必要がある場合は、ハイパーリンクをボタンのようにスタイリングするなど、少しハックすることをお勧めします。

score 36 · Accepted Answer

編集：OPが彼が望んでいたことを明確にする前に答えました。:active以下は、疑似クラスではなく、javascripts onclick に似た onclick です。

これは、Javascript またはCheckbox Hackでのみ実現できます。

チェックボックスのハックでは、基本的にラベルをクリックしてチェックボックスを「チェック」し、ラベルを好きなようにスタイルできます。

デモ_

score 20 · Accepted Answer

TylerHは本当に良い答えを出してくれました。最後のボタンを視覚的に更新する必要がありました。

.btn {
    border-radius: 5px;
    padding: 10px 30px;
    box-shadow: 1px 1px 1px #000;
    background-image: linear-gradient(to bottom, #eee, #ddd);
}

.btn:hover {
    background-image: linear-gradient(to top, #adf, #8bf);
}

.btn:active {
    margin: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
}

#btnControl {
    display: block;
    visibility: hidden;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>

score 15 · Accepted Answer

ハックではない純粋な CSS ソリューションはどうですか?

.page {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #121519;
  color: whitesmoke;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.arrow {
  cursor: pointer;
  transition: filter 0.3s ease 0.3s;
}

.arrow:active {
  filter: drop-shadow(0 0 0 steelblue);
  transition: filter 0s;
}

<body class="page">
  <div class="controls">
    <div class="arrow">
      <img src="https://i.imgur.com/JGUoNfS.png" />
    </div>
  </div>
</body>

@TylerH の反応は素晴らしいですが、かなり複雑なソリューションです。余分な要素を一切使わずに、純粋な css を使用した単純な「onclick」効果だけが必要な人のための解決策があります。

単純に CSS トランジションを使用します。おそらくアニメーションでも同様のことができます。

秘訣は、ユーザーがクリックしたときに遷移が持続するように、遷移の遅延を変更することです。

.arrowDownContainer:active,
.arrowDownContainer.clicked {
  filter: drop-shadow(0px 0px 0px steelblue);
  transition: filter 0s;
}

ここでは、「クリックされた」クラスも追加して、必要に応じて JavaScript も効果を提供できるようにします。私の場合、このように指定された透明なグラフィックブルーを強調表示するため、0px ドロップシャドウフィルターを使用します。

ここではフィルターを 0 に設定しているので、効果がありません。効果がリリースされたら、トランジションに遅延を追加して、素敵な「クリック」効果を提供できます。

.arrowDownContainer {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  top: 490px;
  left: 108px;
  height: 222px;
  width: 495px;
  z-index: 3;
  transition: filter 0.3s ease 0.3s;
}

これにより、ユーザーがボタンをクリックすると、青色が強調表示され、ゆっくりとフェードアウトするように設定できます (もちろん、他の効果も使用できます)。

ここではハイライトするアニメーションが瞬時に表示されるという制限がありますが、目的の効果は得られます。このトリックをアニメーションで使用して、全体的なトランジションをよりスムーズにすることができます。

score 7 · Accepted Answer

わかりました、これはおそらく古い投稿です...しかし、最初はグーグルで検索され、これを独自のミックスにすることにしました..

まず、フォーカスを使用します

この理由は、私が示している例ではうまく機能するためです。マウスダウンタイプのイベントが必要な場合は、アクティブを使用してください

HTML コード:

<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>

CSS コード:

/* Change Button Size/Border/BG Color And Align To Middle */
    .mdT {
        width:96px;
        height:96px;
        border:0px;
        outline:0;
        vertical-align:middle;
        background-color:#AAAAAA;
    }
    .mdT:focus {
        width:256px;
        height:256px;
    }

/* Change Images Depending On Focus */
    .mdI1       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img1');     }
    .mdI1:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+1');   }
    .mdI2       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img2');     }
    .mdI2:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+2');   }
    .mdI3       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img3');     }
    .mdI3:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+3');   }
    .mdI4       {   background-image:url('http://placehold.it/96x96/AAAAAA&text=img4');     }
    .mdI4:focus {   background-image:url('http://placehold.it/256x256/555555&text=Image+4');   }

JS フィドルリンク: http://jsfiddle.net/00wwkjux/

では、なぜこれを古いスレッドに投稿しているのですか。ここの例はさまざまであり、実際の例であるコミュニティに提供することを考えたからです。

スレッドの作成者がすでに回答したように、クリックイベントの間だけ効果が持続することを望んでいます。これはそのニーズに正確ではありませんが、近いです。マウスがダウンしている間はアクティブになり、より長く持続させる必要がある変更は JavaScript で行う必要があります。

score 2 · Accepted Answer

マウスホバーとマウスクリック用の以下のコードがあり、動作します：

//For Mouse Hover
.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    text-align:center;
    vertical-align:middle;
    height: 70%;
    width: 80%;
    top:auto;
    left: 10%;
}

このコードは、クリックすると画像を非表示にします。

.thumbnail:active span {
    visibility: hidden;
}

score 0 · Accepted Answer

問題の核心に入る前に、将来の参考のために正しく理解しておきましょう —clickイベントは JavaScript で処理する必要があります。

document.querySelector('img').addEventListener('click', function() {
  this.classList.toggle('large');
});

.large {
  width: 75px;
  height: 75px;
}

<img src="https://i.stack.imgur.com/5FBwB.png" alt="Heart">

ただし、何らかの理由で JavaScript を使用できない場合は、clickイベントを模倣して CSS でトグルボタンを作成する 2 つの一般的な方法があります。

チェックボックスハック

チェックボックスのハックは良い習慣ではありません:

意味的に正しくないため、ハックと呼ばれます。
これにより、キーボードユーザーとスクリーンリーダーのアクセシビリティの問題が発生します。
チェックボックスは、制御する要素の前の兄弟である必要があるため、HTML の構造が制限されます。
<html>および<body>要素を制御することはできません。

:ターゲットセレクター

:targetCSS 疑似クラスは、URL のフラグメントと一致する一意の要素 (ターゲット要素)を表します。id次の例でわかるように、doer のhref値#fade-outはターゲット要素のと一致しidます。

a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  background: linear-gradient(#eee, #ddd);
  color: #333;
  font: bold 12px Verdana;
  text-shadow: 0 1px white;
  text-decoration: none;
}

p {
  font: 13px/1.5 Arial;
  padding: 1em;
  background: aqua;
  transition: 1s linear;
}

:target {
  opacity: 0;
}

<a href="#fade-out">Fade out</a>

<p id="fade-out">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

:targetセレクターを使用して、現在アクティブなターゲット要素のスタイルを設定できます。つまり、ラジオボタンのように機能します。特定のグループ内で同時に選択できるのは 1 つだけです。

body {
  display: inline-grid;
  font: 16px "Times New Roman";
}

a {
  padding-left: 24px;
  margin: 0 2em 1em 0;
  justify-self: start;
  background: radial-gradient(circle 7px at 8px, #dedede 7px, transparent 8px);
  color: #333;
  text-decoration: none;
}

a:hover {
  background: radial-gradient(circle 7px at 8px, #ccc 7px, transparent 8px);
}

a:target {
  background: radial-gradient(circle 7px at 8px, dodgerBlue 4px, white 5px 6px, dodgerBlue 7px, transparent 8px);
}

div {
  grid-area: 1 / 2 / 7;
  width: 154px;
  height: 154px;
  text-align: center;
  background: aqua;
  color: black;
  border-radius: 50%;
  transition: 0.3s linear;
}

#rotate90:target ~ div {
  transform: rotate(90deg);
}

#rotate180:target ~ div {
  transform: rotate(180deg);
}

#rotate270:target ~ div {
  transform: rotate(270deg);
}

#rotate360:target ~ div {
  transform: rotate(360deg);
}

<a href="#rotate0" id="rotate0">0°</a>
<a href="#rotate90" id="rotate90">90°</a>
<a href="#rotate180" id="rotate180">180°</a>
<a href="#rotate270" id="rotate270">270°</a>
<a href="#rotate360" id="rotate360">360°</a>

<div>•&lt;/div>

Q.トグルボタンを作成するにはどうすればよいですか?
A.基本的には、次のように機能します。「実行者」と「実行者」の 2 つのハイパーリンクを使用します。doer はターゲット要素を指し、どこも指していない undoer は効果を逆にします。

次のデモは、:targetセレクターの可能性を示し、使用方法のアイデアを提供します。

前の兄弟をスタイリングする

div {
  width: 200px;
  height: 200px;
  background: #dedede;
  transition: 0.3s ease-in-out;
}

a {
  display: inline-flex;
  align-items: center;
  column-gap: 1ch;
  margin-top: 1em;
  font: 16px Arial;
  color: #333;
  text-decoration: none;
}

a::before {
  content: "✔";
  font-size: 13px;
  width: 1.2em;
  line-height: 1.2em;
  text-align: center;
  background: #dedede;
  color: transparent;
}

.undoer::before {
  background: dodgerBlue;
  color: white;
  text-shadow: 0 2px black;
}

.doer:hover::before {
  background: #ccc;
}

:target {
  border-radius: 50%;
}

.undoer,
:target ~ .doer {
  display: none;
}

:target ~ .undoer {
  display: inline-flex;
}

<div id="circle"></div>

<a href="#circle" class="doer">Circle</a>
<a href="#square" class="undoer">Circle</a>

次の兄弟をスタイリングする

リンクは、まったく同じアンカー要素をターゲットにすることもできます。

body {
  text-align: center;
}

h1 {
  font-size: 24px;
}

a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  margin-bottom: 1em;
  background: linear-gradient(#eee, #ddd);
  color: #333;
  font: bold 12px Verdana;
  text-shadow: 0 1px white;
  text-decoration: none;
}

[class]:not(.yellow) {
  color: white;
  text-shadow: 0 1px black;
}

.red {
  background: red;
}

.orange {
  background: orange;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.indigo {
  background: indigo;
}

.violet {
  background: violet;
}

div {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  background: #eee;
  transition: 0.3s ease-in-out;
}

[class],
:target {
  display: none;
}

:target + a {
  display: inline-block;
}

#red:target ~ div {
  background: red;
}

#orange:target ~ div {
  background: orange;
}

#yellow:target ~ div {
  background: yellow;
}

#green:target ~ div {
  background: green;
}

#blue:target ~ div {
  background: blue;
}

#indigo:target ~ div {
  background: indigo;
}

#violet:target ~ div {
  background: violet;
}

<h1></h1>

<a href="#red" id="red">Red</a>
<a href="#cancel" class="red">Red</a>

<a href="#orange" id="orange">Orange</a>
<a href="#cancel" class="orange">Orange</a>

<a href="#yellow" id="yellow">Yellow</a>
<a href="#cancel" class="yellow">Yellow</a>

<a href="#green" id="green">Green</a>
<a href="#cancel" class="green">Green</a>

<a href="#blue" id="blue">Blue</a>
<a href="#cancel" class="blue">Blue</a>

<a href="#indigo" id="indigo">Indigo</a>
<a href="#cancel" class="indigo">Indigo</a>

<a href="#violet" id="violet">Violet</a>
<a href="#cancel" class="violet">Violet</a>

<div></div>

要素を置き換える

お気づきかもしれませんが、要素を別の要素に完全に置き換えることができます。

.undoer,
:target {
  display: none;
}

:target + .undoer {
  display: inline;
}

<a href="#on" title="Turn on the light" id="on"><img src="https://i.stack.imgur.com/nuKgJ.png" alt="Light on"></a>
<a href="#off" title="Turn off the light" class="undoer"><img src="https://i.stack.imgur.com/3DLVM.png" alt="Light off"></a>

アンカー内にブロックレベルの要素をネストすることもできます。

doer から undoer に切り替えるときにトランジション効果が必要な場合はposition: absolute、1つ目とvisibility: hidden2 つ目を使用します。

a {
  display: block;
  box-sizing: border-box;
  width: 64px;
  padding-left: 33px;
  border-radius: 16px;
  background: radial-gradient(circle 12px, white 100%, transparent calc(100% + 1px)) #ccc -16px;
  font: bold 12px/32px Verdana;
  color: white;
  text-shadow: 0 1px black;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  transition-property: padding-left, background-color, background-position;
}

#start {
  position: absolute;
}

:target,
:target + .undoer {
  padding-left: 8px;
  background-color: dodgerBlue;
  background-position: 16px;
}

.undoer,
:target {
  visibility: hidden;
}

:target + .undoer {
  visibility: visible;
}

<a href="#start" id="start">OFF</a>
<a href="#stop" class="undoer">ON</a>

コンテンツの非表示と表示

こちらがナビゲーションメニューです。

html,
body {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  line-height: 50px;
  background: linear-gradient(#999, #333);
  color: white;
}

a {
  color: inherit;
  text-decoration: none;
}

header > a,
header h1 {
  font-size: 26px;
  font-family: 'Times New Roman';
  text-shadow: 0 3px black;
}

header > a {
  width: 50px;
  text-align: center;
}

header h1 {
  margin: 0;
  letter-spacing: 1px;
}

nav {
  position: absolute;
  top: 50px;
  background: #333;
  visibility: hidden;
  transform: translateX(-100%);
  transition: 280ms ease-out 120ms;
}

nav a {
  display: block;
  padding: 1em;
  font: bold 12px Verdana;
  transition: inherit;
}

nav a:not(:last-child) {
  border-bottom: 1px solid black;
}

nav a:hover,
#current {
  background: #A00;
}

.undoer,
:target {
  display: none;
}

:target + .undoer {
  display: block;
}

:target ~ nav {
  visibility: visible;
  transform: none;
}

main {
  padding: 16px;
  font: 13px Arial;
  color: #333;
}

main h1 {
  font-size: 1.5em;
}

p {
  line-height: 1.5;
}

<header>
  <a href="#open" id="open">☰&lt;/a>
  <a href="#close" class="undoer">✕&lt;/a>
  <h1> Music School</h1>
  <nav>
    <a href="#" id="current">Home</a>
    <a href="#">Instruments</a>
    <a href="#">Online Lessons</a>
    <a href="#">Register</a>
    <a href="#">Contact</a>
  </nav>
</header>
<main>
  <h1>Home</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

そしてこちらがFAQページです。

body {
  font: 16px Arial;
  color: #333;
  max-width: 600px;
  margin: 1em auto;
}

h1 {
  text-align: center;
  font-family: "Times New Roman";
}

p {
  display: none;
  padding: 12px;
  border: 2px solid #dedede;
  border-top: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

a {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 12px;
  margin-top: 1em;
  background: #dedede;
  color: inherit;
  font-weight: bold;
  line-height: 1.5;
  text-shadow: 0 1px white;
  text-decoration: none;
}

a::before {
  content: "➕";
  padding: 3px;
  background: #eee;
  font-weight: initial;
}

a[href="#close"]::before {
  content: "➖";
}

a:hover::before {
  background: #fff;
}

a[href="#close"],
a:target {
  display: none;
}

a:target + a {
  display: flex;
}

a:target + a + p {
  display: block;
}

<h1>Frequently Asked Questions</h1>

<a href="#open1" id="open1">How do we get more energy from the sun?</a>
<a href="#close">How do we get more energy from the sun?</a>
<p>Dwindling supplies of fossil fuels mean we’re in need of a new way to power our planet. Our nearest star offers more than one possible solution. We’re already harnessing the sun’s energy to produce solar power. Another idea is to use the energy in sunlight to split water into its component parts: oxygen, and hydrogen, which could provide a clean fuel for cars of the future. Scientists are also working on an energy solution that depends on recreating the processes going on inside stars themselves – they’re building a nuclear fusion machine. The hope is that these solutions can meet our energy needs.</p>

<a href="#open2" id="open2">What's so weird about prime numbers?</a>
<a href="#close">What's so weird about prime numbers?</a>
<p>The fact you can shop safely on the internet is thanks to prime numbers – those digits that can only be divided by themselves and one. Public key encryption – the heartbeat of internet commerce – uses prime numbers to fashion keys capable of locking away your sensitive information from prying eyes. And yet, despite their fundamental importance to our everyday lives, the primes remain an enigma. An apparent pattern within them – the Riemann hypothesis – has tantalised some of the brightest minds in mathematics for centuries. However, as yet, no one has been able to tame their weirdness. Doing so might just break the internet.</p>

<a href="#open3" id="open3">Can computers keep getting faster?</a>
<a href="#close">Can computers keep getting faster?</a>
<p>Our tablets and smartphones are mini-computers that contain more computing power than astronauts took to the moon in 1969. But if we want to keep on increasing the amount of computing power we carry around in our pockets, how are we going to do it? There are only so many components you can cram on to a computer chip. Has the limit been reached, or is there another way to make a computer? Scientists are considering new materials, such as atomically thin carbon – graphene – as well as new systems, such as quantum computing.</p>

<a href="#open4" id="open4">When can I have a robot butler?</a>
<a href="#close">When can I have a robot butler?</a>
<p>Robots can already serve drinks and carry suitcases. Modern robotics can offer us a “staff” of individually specialised robots: they ready your Amazon orders for delivery, milk your cows, sort your email and ferry you between airport terminals. But a truly “intelligent” robot requires us to crack artificial intelligence. The real question is whether you’d leave a robotic butler alone in the house with your granny. And with Japan aiming to have robotic aides caring for its elderly by 2025, we’re thinking hard about it now.</p>

<a href="#open5" id="open5">What's at the bottom of the ocean?</a>
<a href="#close">What's at the bottom of the ocean?</a>
<p>Ninety-five per cent of the ocean is unexplored. What’s down there? In 1960, Don Walsh and Jacques Piccard travelled seven miles down, to the deepest part of the ocean, in search of answers. Their voyage pushed the boundaries of human endeavour but gave them only a glimpse of life on the seafloor. It’s so difficult getting to the bottom of the ocean that for the most part we have to resort to sending unmanned vehicles as scouts. The discoveries we’ve made so far – from bizarre fish such as the barreleye, with its transparent head, to a potential treatment for Alzheimer’s made by crustaceans – are a tiny fraction of the strange world hidden below the waves.</p>

<a href="#open6" id="open6">What's at the bottom of a black hole?</a>
<a href="#close">What's at the bottom of a black hole?</a>
<p>It’s a question we don’t yet have the tools to answer. Einstein’s general relativity says that when a black hole is created by a dying, collapsing massive star, it continues caving in until it forms an infinitely small, infinitely dense point called a singularity. But on such scales quantum physics probably has something to say too. Except that general relativity and quantum physics have never been the happiest of bedfellows – for decades they have withstood all attempts to unify them. However, a recent idea – called M-Theory – may one day explain the unseen centre of one of the universe’s most extreme creations.</p>

<a href="#open7" id="open7">How do we solve the population problem?</a>
<a href="#close">How do we solve the population problem?</a>
<p>The number of people on our planet has doubled to more than 7 billion since the 1960s and it is expected that by 2050 there will be at least 9 billion of us. Where are we all going to live and how are we going to make enough food and fuel for our ever-growing population? Maybe we can ship everyone off to Mars or start building apartment blocks underground. We could even start feeding ourselves with lab-grown meat. These may sound like sci-fi solutions, but we might have to start taking them more seriously.</p>

まったく新しいスタイルシートに切り替える

要素とそのすべての子孫をターゲットにしてスタイルを設定できます。たとえば、<body>要素をターゲットにして、ダーク/ライトモードを切り替えてみましょう。

body,
a,
h2 {
  transition: 0.3s linear;
}

body {
  font: 13px Arial;
  background: white;
  color: #333;
}

a {
  font-size: 16px;
  text-decoration: none;
}

main {
  column-count: 3;
  column-gap: 2em;
  padding: 0 1em;
}

h1 {
  column-span: all;
  text-align: center;
}

h2:nth-of-type(1) {
  margin-top: 0;
}

p {
  line-height: 1.5;
}

:target {
  background: #333;
  color: white;
}

.doer {
  position: absolute;
}

.undoer,
:target .doer {
  visibility: hidden;
  opacity: 0;
}

:target .undoer {
  visibility: visible;
  opacity: 1;
}

:target h2:nth-of-type(1) {
  color: red;
}

:target h2:nth-of-type(2) {
  color: green;
}

:target h2:nth-of-type(3) {
  color: blue;
}

<body id="dark">
<a href="#dark" title="Dark mode" class="doer"></a>
<a href="#light" title="Light mode" class="undoer">☀️&lt;/a>
<main>
<h1>Primary Colors</h1>
<h2>Red</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Green</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Blue</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>

:target可能性のリストに欠けている機能や、セレクターでできる楽しいことはありますか? 以下のコメントで共有してください。