Can I have an onclick effect in CSS?

Question

I have an image element that I want to change on click.

<img id="btnLeft">

This works:

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

But what I need is:

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

But, it doesn't work, obviously. Is it possible at all to have onclick behavior in CSS (i.e. without using JavaScript)?

Answer 1

Answer as of 2021:

The best way (actually the only way*) to simulate an actual click event using only CSS (rather than just hovering on an element or making an element active, where you don't have mouseUp) is to use the checkbox hack. It works by attaching a label to an <input type="checkbox"> element via the label's for="" attribute.

This feature has broad browser support (the :checked pseudo-class is IE9+).

Apply the same value to an <input>'s ID attribute and an accompanying <label>'s for="" attribute, and you can tell the browser to re-style the label on click with the :checked pseudo-class, thanks to the fact that clicking a label will check and uncheck the "associated" <input type="checkbox">.

* You can simulate a "selected" event via the :active or :focus pseudo-class in IE7+ (e.g. for a button that's normally 50px wide, you can change its width while active: #btnControl:active { width: 75px; }), but those are not true "click" events. They are "live" the entire time the element is selected (such as by Tabbing with your keyboard), which is a little different from a true click event, which fires an action on - typically - mouseUp.

---

Basic demo of the checkbox hack (the basic code structure for what you're asking):

label {
    display: block;
    background: lightgrey;
    width: 100px;
    height: 100px;
}

#demo:checked + label {
    background: blue;
    color: white;
}

<input type="checkbox" id="demo"/>
<label for="demo">I'm a square. Click me.</label>

Here I've positioned the label right after the input in my markup. This is so that I can use the adjacent sibling selector (the + key) to select only the label that immediately follows my #demo checkbox. Since the :checked pseudo-class applies to the checkbox, #demo:checked + label will only apply when the checkbox is checked.

Demo for re-sizing an image on click, which is what you're asking:

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>

With that being said, there is some bad news. Because a label can only be associated with one form control at a time, that means you can't just drop a button inside the <label></label> tags and call it a day. However, we can use some CSS to make the label look and behave fairly close to how an HTML button looks and behaves.

Demo for imitating a button click effect, above and beyond what you're asking:

#btnControl {
    display: none;
}

.btn {
    width: 60px;
    height: 20px;
    background: silver;
    border-radius: 5px;
    padding: 1px 3px;
    box-shadow: 1px 1px 1px #000;
    display: block;
    text-align: center;
    background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
    font-family: arial;
    font-size: 12px;
    line-height:20px;
}

.btn:hover {
    background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}


.btn:active {
    margin-left: 1px 1px 0;
    box-shadow: -1px -1px 1px #000;
    outline: 1px solid black;
    background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}

#btnControl:checked + label {
    width: 70px;
    height: 74px;
    line-height: 74px;
}

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

Most of the CSS in this demo is just for styling the label element. If you don't actually need a button, and any old element will suffice, then you can remove almost all of the styles in this demo, similar to my second demo above.

Answer 2

The closest you'll get is :active:

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

However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.

Answer 3

You can use pseudo class :target to mimic on click event, let me give you an example.

#something {
  display: none;
}

#something:target {
  display: block;
}

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

Here's how it looks like: http://jsfiddle.net/TYhnb/

One thing to note, this is only limited to hyperlink, so if you need to use on other than hyperlink, such as a button, you might want to hack it a little bit, such as styling a hyperlink to look like a button.

Answer 4

If you give the element a tabindex then you can use the :focus pseudo class to simulate a click.

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

<img id="btnLeft" tabindex="0" src="https://picsum.photos/200"/>

Answer 5

Edit: Answered before OP clarified what he wanted. The following is for an onclick similar to javascripts onclick, not the :active pseudo class.

This can only be achieved with either Javascript or the Checkbox Hack

The checkbox hack essentially gets you to click on a label, that "checks" a checkbox, allowing you to style the label as you wish.

The demo

Answer 6

TylerH made a really good answer, I just had to give that last button a visual update.

.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>

Answer 7

How about a pure CSS solution without being (that) hacky?

.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 has a great response but its a pretty complex solution. I have a solution for those of you that just want a simple "onclick" effect with pure css without a bunch of extra elements.

We will simply use css transitions. You could probably do similar with animations.

The trick is to change the delay for the transition so that it will last when the user clicks.

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

Here I add the "clicked" class as well so that javascript can also provide the effect if it needs to. I use 0px drop-shadow filter because it will highlight the given transparent graphic blue this way for my case.

I have a filter at 0s here so that it wont take effect. When the effect is released I can then add the transition with a delay so that it will provide a nice "clicked" effect.

.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;
}

This allows me to set it up so that when the user clicks the button, it highlights blue then fades out slowly (you could, of course, use other effects as well).

While you are limited here in the sense that the animation to highlight is instant, it does still provide the desired effect. You could likely use this trick with animation to produce a smoother overall transition.

Answer 8

Warning! Particularly simple answer below! :)

You actually can have a change that persists (such as a block/popup that appears and stays visible after a click) with only CSS (and without using the checkbox hack) despite what many of the (otherwise correct) answers here claim, as long as you only need persistence during the hover.

So take a look at Bojangles and TylerH's answers if those work for you, but if you want a simple and CSS only answer that will keep a block visible after being clicked on (and even can have the block disappear with a followup click), then see this solution.

I had a similar situation, I needed a popup div with onClick where I couldn't add any JS or change the markup/HTML (a truly CSS solution) and this is possible with some caveats. You can't use the :target trick that can create a nice popup unless you can change the HTML (to add an 'id') so that was out.

In my case the popup div was contained inside the other div, and I wanted the popup to appear on top of the other div, and this can be done using a combination of :active and :hover:

/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
    position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
    display: block;
}
/* General settings for popup */
.info {
    position: absolute;
    top: -5;
    display: none;
    z-index: 100;
    background-color: white;
    width: 200px;
    height: 200px;
}

Example (as well as one that allows clicking on the popup to make it disappear) at:

http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/

I've also inserted a code snippet example below, but the positioning in the stackoverflow sandbox is weird so I had to put the 'click here' text after the innerDiv, which isn't normally needed.

/* Outer div - needs to be relative so we can use absolute positioning */
 .clickToShowInfo {
  position: relative;
 }
 /* When clicking outer div, make inner div visible */
 .clickToShowInfo:active .info { visibility: visible; }
 /* And hold by staying visible on hover */
 .info:hover {
  visibility: visible;
 }
 /* General settings for popup */
 .info {
  position: absolute;
  top: -10;
  visibility: hidden;
  z-index: 100;
  background-color: white;
  box-shadow: 5px 5px 2px #aaa;
  border: 1px solid grey;
  padding: 8px;
  width: 220px;
  height: 200px;
 }
 /* If we want clicking on the popup to close, use this */
 .info:active {
  visibility: hidden; /* Doesn't work because DCEvent is :active as well */
  height: 0px;
  width: 0px;
  left: -1000px;
  top: -1000px;
 }

<p />
<div class="clickToShowInfo">
 <div class="info">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
 </div>
 Click here to show info
</div>
<p />

Answer 9

Okay, this maybe an old post... but was first result in google and decided to make your own mix on this as..

FIRSTLY I WILL USE FOCUS

The reason for this is that it works nicely for the example i'm showing, if someone wants a mouse down type event then use active

THE HTML CODE:

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

THE CSS CODE:

/* 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 FIDDLE LINK: http://jsfiddle.net/00wwkjux/

So why am i posting this in an old thread, well because the examples here vary and i thought to provide one back to the community which is a working example.

As already answered by the thread creator, they only want the effect to last during the click event. Now while this is not exact for that need, its close. active will animate while the mouse is down and any changes that you need to have last longer need to be done with javascript.

Answer 10

I had a problem with an element which had to be colored RED on hover and be BLUE on click while being hovered. To achieve this with css you need for example:

h1:hover { color: red; } 
h1:active { color: blue; }

<h1>This is a heading.</h1>

I struggled for some time until I discovered that the order of CSS selectors was the problem I was having. The problem was that I switched the places and the active selector was not working. Then I found out that :hover to go first and then :active.

Answer 11

I have the below code for mouse hover and mouse click and it works:

//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%;
}

and this code hides the image when you click on it:

.thumbnail:active span {
    visibility: hidden;
}

Answer 12

Before we go to the heart of the matter, let’s get it right for future reference — You should handle a click event with 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">

However, if for some reason you can’t use JavaScript, there are two common approaches to mimic a click event and create a toggle button with CSS.

Checkbox hack

The checkbox hack is not a good practice:

• It’s not semantically correct, and that’s why it’s called a hack.
• It causes accessibility issues for keyboard users and screen readers.
• It restricts you in the structure of your HTML as the checkbox needs to be a previous sibling of the element you want to control.
• You can’t control the <html> and <body> elements.

:target selector

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment. As you see in the following example, the doer’s href value, #fade-out, matches the target element’s 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>

The :target selector can be used to style the current active target element. That means it works like a radio button: Only one in a given group can be selected at the same time.

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>•</div>

Q. How can you create a toggle button?
A. Basically, this is how it works: You use two hyperlinks, a “doer” and an “undoer”. The doer points to the target element, and the undoer, which points to nowhere, reverses the effect.

The following demos show the :target selector's potential and give you an idea of how to use it.

Style a previous sibling

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>

Style a next sibling

A link can target even the very same anchor element.

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>

Replace an element

As you may have noticed, you can entirely replace an element with another one.

.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>

You may even nest block-level elements inside your anchors.

If you wish to have a transition effect when you switch from the doer to the undoer, use position: absolute on the first and visibility: hidden on the second.

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>

Hide and show content

Here's a navigation menu.

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">☰</a>
  <a href="#close" class="undoer">✕</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>

And here's an FAQ page.

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>

Switch to a whole new stylesheet

You can target and style an element as well as all its descendants. For example, let’s target the <body> element and toggle dark/light mode.

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">☀️</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>

Any features missing from the list of possibilities and fun things you can do with the :target selector? Please share in the comments below.

Answer 13

you can use :target

or to filter by class name, use .classname:target

or filter by id name using #idname:target

#id01:target {      
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msg {
    display:none;
}

.close {        
    color:white;        
    width: 2rem;
    height: 2rem;
    background-color: black;
    text-align:center;
    margin:20px;
}

  
<a href="#id01">Open</a>

<div id="id01" class="msg">    
    <a href="" class="close">&times;</a>
    <p>Some text. Some text. Some text.</p>
    <p>Some text. Some text. Some text.</p>
</div>