Skip to Content

Finding CSS class and ids using developer tool may sound for easy for a developer using inspection tool. But  dashboard designer always finds some difficulties in getting Classes and ids.


what is CSS class and ID?

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.


Example:


.intro{
background-color
:yellow;
}

The ID Selector

The #id selector styles the element with the specified id.

Example:


#firstname {
background-color
:yellow;
}

All css customization can be done using ID and classes.

So as a first step, I have created a simple utill component which can get you all the css classes and ID’s used in component.


/wp-content/uploads/2016/07/csspicker1_996793.png

So how to use it?


I can select any particular component or all components. It will retrieve the css classes and ID’s for that component.let’s say I need to check out button

component.


/wp-content/uploads/2016/07/csspicker2_996821.png

You can see all the styles for that specified id used for the button component. Now I can simply write a css something like this to change the button background-color using this id.



#BUTTON_1_button{
background-color:orange !important;
}

So simply I can explore classes to know what are all the style available and simply make changes with the addition of !important.

/wp-content/uploads/2016/07/csspicker3_996823.png

I can also choose option to see class


/wp-content/uploads/2016/07/csspicker4_996824.png

This will reduce the difficulty of finding classes and ID’s. I have been trying to do something more with this,I will update you with few feature upgrades.

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

    1. Nithyanandam Venu Post author

      Hi Mustafa,

      No plan of making it available and lot of features need to be done in it. Thanks for the comment 🙂

      Thanks,

      Nithyanandam

      (0) 

Leave a Reply