:target is an awesome selector that most people either don't know about or don't know how to use effectively. There is a lot we can do using the target selector. I love it as I can do things without using JavaScript.
Note: This is the 5th part of the series dedicated to the pseudo classes of CSS.
In this part, we'll understand the pseudo class :target but if you want to jump to any other pseudo class, be my guest and click on the links provided below:
part 1: pesudo class :hover
part 2: pseudo class :link
part 3: pseudo class :visited
part 4: pseudo class :active
part 5: pseudo class :target
Here we go:
let's see what MDN has to say:
The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.
Did you understand what MDN said๐. Don't worry, let's understand with a simple example:
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p:target{
background-color: red;
color: white;
}
</style>
</head>
<body>
<a href="#one">Change 1st line.</a>
<div>
<p id="one">testing the target selector</p>
</div>
</body>
</html>
I hope you understood and if you don't, I made this ๐ up:
Step 1: Browser sees styling has been done on p:target.
Step 2: In order to get more information browser goes to the p tag and there it notices the id:"one" inside the p tag.
Step 3: Browser understands that this id must be in href of some anchor tag and it goes to the relevant anchor tag based on the id.
Step 4: Reaches the anchor tag and understands that as soon as this anchor tag will be clicked I'll give styling to the relevant p tag (having id: one).
I hope you understand. If you don't let's see another example:
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p:target{
background-color: red;
color: white;
}
</style>
</head>
<body>
<a href="#one">Change 1st line.</a>
<a href="#two">Change 2nd line</a>
<div>
<p id="one">testing the target selector</p>
<p id="two">testing the target selector</p>
</div>
</body>
</html>
If you still don't clearly get it. I'll show a really cool example. see this ๐ Wikipedia page:
you must have seen that when we click on any title in the content menu on the Wikipedia page, we are taken to that particular section on the page. You could achieve the same functionality using only the active selector. wanna know how? See Below Example:
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div:target{
background-color: lightblue;
}
a{
display: block;
}
</style>
</head>
<body>
<a href="#childhood">Childhood</a>
<a href="#marriage">Marriage</a>
<a href="#career">Career</a>
<a href="#publications">Publications</a>
<div id="childhood">
<h2>Childhood</h2>
<p>Lorem ipsum text</p>
</div>
<div id="marriage">
<h2>Marriage</h2>
<p>Lorem ipsum textL</p>
</div>
<div id="career">
<h2>Career</h2>
<p>Lorem ipsum text</p>
</div>
<div id="publications">
<h2>Publications</h2>
<p>Lorem ipsum text</p>
</div>
</body>
</html>
I hope you understand. If you still don't let me show you another magic. This time we'll click on a link and an image will appear out of thin air.
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img:target{
display: block;
height: auto;
width: 25rem;
object-fit: cover;
}
img{
display: none;
}
</style>
</head>
<body>
<a href="#quote-image">See Magic</a>
<img id="quote-image" src="/pics/5.jpg" alt="quote">
</body>
</html>
We gave image "display: none" and as a result it won't be displayed but as soon as we click on the link the "display: block" will be set for the image and it could be seen.
I could go on and on and on with examples. Just imagine how many use-cases could be there for the pseudo class :target.
That's all folks.
If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.
I write one article every day related to web development (yes, every single f*cking day). Follow me here if you are learning the same..
If you linked the article follow me on twitter: @therajatg
If you are the linkedin type, let's connect: https://www.linkedin.com/in/therajatg/
Have an awesome day ahead ๐!
Top comments (0)