Skip to Content
Author's profile photo Nithyanandam Venu

Find CSS class and ID’s using CSS picker

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.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      A very useful utility component, Nithyanandam.  If you're planning on making it publically available as open source then you may wish to consider contributing it to the SCN Design Studio SDK Development Community component suite 🙂

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog 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

      Author's profile photo Former Member
      Former Member

      Very useful utility, Nithyanandam.

      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      Thanks Veeraraghavan 🙂

      Author's profile photo Vidhya V
      Vidhya V

      Good One.. Great... 🙂