CSS Tips and Tricks Using Pseudo-Class

CSS Tips and Tricks Using Pseudo-Class

“Colorful lines of code on a computer screen” by Sai Kiran Anagani on Unsplash

We know that CSS Pseudo-Class is very helpful in styling a special state of the selected element(s). Like changing or adding a style when the button is clicked or hovered. Cool Right? But that’s not it, we can do a lot of cool things using CSS Pseudo-Class. In this article, I will cover some of Pseudo-Class and share some tips and tricks that might be helpful and interesting.

:Hover

We can make a simple tooltip using :hover
.hover-target:hover + .hover-element{
opacity: 1;
transform: translateX(0);
}
.hover-element{
border-radius: 5px;
background: #c0392b;
margin: 0px 10px;
text-align: center;
padding: 5px 10px;
opacity: 0;
transform: translateX(40px);
transition: all 1.5s ease;
}

HOVER ME

I am hovering

When we hover on .hover-target, it will target its Adjacent sibling + which is .hover-element and it will trigger the style on .hover-target:hover + .hover-element that will change its opacity and transform of the .hover-element while the mouse pointer is hovering on .hover-target .
You can also use general sibling ~ to target multiple sibling elements.

Note: We are using CSS Transitions to create a smooth animation when changing the CSS properties.

:Checked

We can make conditions using :checked
.input-checked{
background: #3498db;
height: 20px;
font-size: 15px;
padding: 5px;
border-radius: 5px;
opacity: 0;
transform: translateX(40px);
transition: all 1.5s ease;
}
.input-cBox:first-child:not(:checked) +
.input-radio:checked +
.input-cBox:checked +
.input-checked{
opacity: 1;
transform: translateX(0);
}




Conditions are True

We make a condition where the inputs should be checked except for the first child checkbox of .input-cBox .

Here are the steps to make a conditions using :checked

  • Target .input-cBox and .input-radio using Adjacent sibling +
  • Add:checked to .input-cBox and .input-radio except for the first child of the .input-cBox
  • Then, target the first child of .input-cBox using :first-child and add the condition :not(:checked) .

If the conditions are true the style will work.

.input-cBox:first-child:not(:checked) means that select the first child of .input-cBox that is not checked.

:Target

Style an element based on the active hash in URL
.target{
font-size:18px;
opacity: 0;
transform: translateX(40px);
transition: all 1.5s ease;
}
.target:target{
opacity: 1;
transform: translateX(0);
}

Click Me

Target is Set


We can also target a specific element based on the fragment identifier / hash mark # in the URL. When we click on the link Click Me it will change the URL to https://example.com#element-target .The #element-target in the URL refers to the element with an id=”element-target” , using :target we can be able to set the style of an element that matches the current URL fragment identifier / hash mark # in the URL.

.target:target we add a class in the p to set its style and specificity weight.
If we use the #element-target to set the p style, the :target style will not work since using id in styling will have a higher specificity.

:link | :visited | :hover | :active (Links States)

Link color is yellow but will be red when hovered, blue when clicked and green when visited.
a:link{
color:yellow;
}
a:visited{
color:green;
}
a:hover{
color:red;
}
a:active{
color:blue;
}

Links States


Have you ever wondered why your links states style are not working?
Although you are thinking that they have same specificity weight, these is because links states have a specific trigger to set it’s style.
To make our links states all working, we need first set the style of :link and then set :visited style, :visited style can be set before or after the style of :link even that it will not override the style of :link since :visited style will be trigger when link is visited and :link style will trigger when link is unvisited that’s why we set first the :link because the default state of the link is unvisited. And then set the style of :hover and set the :active style at last because you need to trigger first the :hover style before you can click to trigger the :active style.

That’s why we need to set the style of :active at the last. Also the :hover and :active style should come after :link and :visited styles so it will not override the style because you need to trigger the link to be visited or unvisited before you can trigger the :hover and :active style. With this we can came up to an idea of LVHA-order style to implement link specificity.

So to easily remember this link specificity, just remember LOVE (LV) and HATE (HA) or the LVHA acronym. You should also know why and how these link specificity or LVHA-order came up.

CSS Pseudo-Classes can do a lot of cool things.
You can also try and explore more on Pseudo-Class, like example using :hover you can make a zoom effect on image when you hover on it or using :target to create a modal and use fragment identifier to set the state of the modal.

Thanks for your time reading my article.
Hope that this article helped you in your journey on Web Development.

Please do hit the CLAP button on the left, If this CSS tips and tricks helped you.


CSS Tips and Tricks Using Pseudo-Class was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

“CSS Tips and Tricks Using Pseudo-Class” Posted first on ” Web Development on Medium “
Author: Davecar Grave

Author: Pawan Kumar

Leave a Reply

Close Menu
%d bloggers like this:
Skip to toolbar