OK, I kind of understand the principals of CSS specificity and selectors of different weight. But I naively thought that if I defined a totally unique class for an element, then that element would win because my new class was unique, and therefore could not be superseded.
But now I realise that even if I have a unique class, previous definitions can override the actual element I am applying it to, even though they do not contain my unique class.
I’m OK with my own style sheets, but when using templates and particularly bootstrap.css and third party templates, you don’t know what previous specifications have been made. I don’t know what previous id selectors, class selectors and type selectors have been created or modified.
The problem is not knowing, for example, what previous settings will affect my a href settings in a particular area on a particular page.
Is there any way, apart from using !important (which is mostly frowned upon) to work out exactly to what level I need to specify my element to override previous settings - because I simply do not know which settings to look for.
There seems to be no ‘human’ algorithm I can apply to establish exactly how specific my specificity needs to be without searching all css files for all id selectors, class selectors and element selectors that may be dominating my style - and inheritance and additional style sheets only complicate things.
Is there any way to look at an element and determine just HOW specific I need to be to get the styling I want.
Cool, could you please give me an example please of how to use this on an element and actually view this chain. I use chrome and know how to open developer tools, but have no idea how to view this css chain for a particular element on a particular chain.
I am super sorry but I am on vacations and have only my iPad available. So I cannot make a screenshot. But if you click on the item on the top left of the developer window (looks like. A sheet with a pointer on it) you can click on any element in the site the browser is showing and you get the elements definitions in the developer tools- it’s more or less self explaining.
If you right-click on any element on the screen, you can choose “Inspect” from the context menu.
It will then show you styling info on that particular element.
You may also browse other elements in the HTML panel to see styling applied to them.
In the stly panel you can toggle rules and edit them realtime, which is useful for non-permanent experimentation.
