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.
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.
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.
I can also choose option to see class
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.
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 🙂
Hi Mustafa,
No plan of making it available and lot of features need to be done in it. Thanks for the comment 🙂
Thanks,
Nithyanandam
Very useful utility, Nithyanandam.
Thanks Veeraraghavan 🙂
Good One.. Great... 🙂