Tooling for CSS childs path?

2
Hi, is there any Browser-tooling for Chrome / Edge available, that allows me to easily extract the path to a specific CSS-child element? For example, I would like to manipulate the label of a Reference Selector. At the moment path to that child element is more guessing (CSS beginner ;-) ) for me. Maybe you know a smart helper tool to automate this task? Thx!
asked
3 answers
1

Hi Tjark,

in CSS there is no such thing as *the* canonical path to an element.  There can be multiple “paths”, and the CSS engine is supposed to take the rule with the highest specificity. 

i.e. if you have as HTML

<ul class=”my-special-list”>
    <li> Item 1 </li>
    <li> Item 2 </li>
</ul>

And you have as css:

ul > li {
   background-color: green;
   font-size: 12px;
}

ul.my-special-list > li {
   background-color: red;
}

both rules will lead to your list items.

For the font-size, the CSS engine will use the first rule, because it applies to all list items in any unordered list. For the background color it will however use the second rule, because it’s more specific (aka “has a higher specificity”) since it’s supposed to apply to list items in unordered lists with class “my-special-list”.

Having said all that, the Chromium dev tools have a tab called “Computed” that shows you where each style applied to an element comes from, or in other words it points you to the applicable (i.e. most specific) rule for that style of the element.

answered
1

Hi Tjark,
One way to start is using “Dev Tools” from your browser (just press F12) and then you can select the element and and see what CSS class you should manipulate.


But for your own custom style you should add your own classes, to a container or directly into the widget or element that you want to edit/customize.  

answered
0

Thanks Miguel,

my question goes in the direction, how I can find out, which path an child element has.

For example, the CSS below manipulates the Listitem of a listview. I know the path, because I simply googled it. ;-) But how can I find out for any random widget and their childs, which is the correct path to set in the CSS? In the Chrome dev tools it not very obvious for me.

 

Thanks for your help!

 

answered