Avishkar Vichare's Blog

Pseudo selectors in CSS

Pseudo selectors in CSS

Avishkar Vichare's photo
Avishkar Vichare
·

2 min read

hey guys lets understand Pseudo selectors. Pseudo selctor can be very useful in various cases. It it used to style specified parts of an element. Well let'a see more into it. I am going to tell you about some commonly used Pseudo selectors in css. which are before, after, hover, focus, marker, etc. let me tell you one thing we use :: to select pseudo element like before, after, marker, etc. and : to select pseudo class like hover , focus, etc.

let's start with before and after

::before consider following HTML code...

 <div class="main">
    Selectors
</div>

it's output.... beff.png

now when we use before Pseudo selectors here as below...

    <style>

        .main::before{
            content: "Name";
        }
    </style>

output is ...

befou.png

as you can see the thing we written in content is displayed before that of our div's original text. So it is used to insert text or any content like element before original element content. we can use it in various way. Such as to add overlay to image and all.

::after as we saw for before , after Pseudo selectors is used to insert content after original element content.

you can also do these with them...

  <style>

        .main::before{
            content: "";
            display: block;
            height: 30px;
            width: 30px;
            background-color: red;

        }
    </style>

do.png

note: you need to mention height, width, and display block to make them visible.

::marker It is used to style that list's marker that we all see in list.

<ul>
  <li>name</li>
  <li>same</li>
  <li>came</li>
</ul>

<style>
::marker { 
  color: red;
  font-size: 23px;
}
</style>

LI.png

::selection it is used to highlight text when select it with mouse. 

<h1>select me for testing </h1>

<style>
::selection {
  color: white;
  background: black;
}
</style>

select.png

:hover as I told you above ':' is used to select classes of element. :hover is used to change css properties of element when it is hover by user.


<div>hover me</div>

<style>
div:hover{
background-color:black;
color:white;
}
</style>

hover.png

if we hover that div we will see...

hover2.png

I hope you understood and got to know about pseudo selectors. There many other pseudo selectors also you can search about them. You can style placeholder too using :: placeholder pseudo selector