• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Devaka Cooray
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Knute Snortum
  • Bear Bibeault
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Frits Walraven
  • Carey Brown
  • Tim Holloway

CSS Hierarchy Question

 
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Okay, I'll try and keep this simple. I've begun looking into more complex CSS setups and I have a question about hierarchy. What's the easiest way to determine where a setting lies?

I have the following piece of HTML code.


I also have CSS code that formats this HTML such as (I removed some code to simplify what is there)

Now if I introduce some CSS for the ID of someID2 it has no effect (whether I place it before or after the assignment above)

I would have thought that a specific ID such as this would override any other CSS assignment (unless an inline CSS). What is the easiest way to determine how to set up additional CSSs that will take effect? I'm pretty sure I know why this is happening but I'd like to hear suggestions / reasons from other people without my thoughts influencing potential comments. TIA.

AF

 
Sheriff
Posts: 67266
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Likes 2
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
#someId div is more specific than just an id name.
 
Rob Hunter
Ranch Hand
Posts: 837
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I was thinking that it but in a way it isn’t :-) one says multiple elements under an id but another is a specific id only, not “generic” underneath. If I have 3 levels of elements but one if’s doesn’t an element type nested which would be chosen? The more levels or the one having an id included? Thanks Bear as well ;-)
 
Bear Bibeault
Sheriff
Posts: 67266
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's not the way specificity works. It's not about the possible number of selected elements, it's about how specific the rule is.
 
Greenhorn
Posts: 7
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.
The universal selector (*) has low specificity, while ID selectors are highly specific!

For Better knowledge look for these following links:

https://www.w3schools.com/css/css_specificity.asp

https://www.techrepublic.com/blog/web-designer/css-specificity-hierarchy-what-you-need-to-know/

https://www.w3schools.com/css/css_combinators.asp
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!