This week's book giveaway is in the Artificial Intelligence and Machine Learning forum.
We're giving away four copies of Transfer Learning for Natural Language Processing (MEAP) and have Paul Azunre on-line!
See this thread for details.
Win a copy of Transfer Learning for Natural Language Processing (MEAP) this week in the Artificial Intelligence and Machine Learning forum!
  • 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
  • Tim Cooke
  • Paul Clapham
  • Devaka Cooray
  • Bear Bibeault
Sheriffs:
  • Junilu Lacar
  • Knute Snortum
  • Liutauras Vilda
Saloon Keepers:
  • Ron McLeod
  • Stephan van Hulst
  • Tim Moores
  • Tim Holloway
  • Piet Souris
Bartenders:
  • salvin francis
  • Carey Brown
  • Frits Walraven

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

 
Marshal
Posts: 67388
173
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
Marshal
Posts: 67388
173
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.
 
Ranch Hand
Posts: 53
  • 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
 
The longest recorded flight time of a chicken is 13 seconds. But that was done without this tiny ad:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic