How does hierarchy elements work in css?

Asked

Viewed 4,177 times

5

I would like to know how the hierarchy works in css, I explain:

Let’s say in mine style.css i set to h1, h2, h3, h4, etc. by default font-size: 12px;, hitherto beauty...

Now, if for example I insert into a class defining that the h1 that class has {font-size: 18px; color: #fff;}, the element should not display font-size: 18px;? 'Cause over and over class catch size 12 instead of 18.

I hope I have been clear in my doubt (and that it is not duplicate). I believe it is quite simple the answer rsrs

Ty

html css classes style
  • 2

    Yes is duplicated from https://answall.com/questions/143850/qual-seletor-css-tem-prioridade and this other may help you https://answall.com/questions/38034/como-se-d%C3%A1-a-preced%C3%Aancia-das-regras-do-css

  • @hugocsl Wherever you go you’re there, my god

  • @I_like_trains =D appeared CSS I appear together rss

  • @hugocsl thanks Ugo could not find something similar at the time of asking the question, but for being simple I suspected that someone could have asked _(ツ)_/

2 answers

5


According to the documentation of Developer.mozilla.org:

Origin is defined in 3 levels

1. Importance

Styles with !important precedes all others and has higher priority.
Followed comes style defined inline, that is, in the element itself, within style:

<div style="border: none"><div>

Then the priority is:
Selector by ID: #id {...}
Selector by name of class: .classe {...}
Selector by name of tag: div {...}

2. Specificity It is measured based on how specific a selector is - how many elements it can combine/achieve. Has a certain "calculation" to be determined, to understand see the link: Specificity

But one simple way to understand it is: the more specific a selector is the higher its priority. Here’s an example of the link above:

HTML:

<div id="test">
  <span>Text</span>
</div>

CSS:

div#test span { color: green; }
div span { color: blue; }
span { color: red; }

In this example, the color will be green, as it is the most specific selector (span nestled with a div, with ID="test"), no matter which order the selectors were declared.

3. Order In a basic way, if the above criteria do not prioritize the rule, it follows the order that have been declared

Another great font here (in English): www.W3.org

  • @Ricardoportugal Thank you very much the explanation of you was simple and effective, great hug!!

  • 1

    I just don’t understand what’s wrong with the answers that voted against her, who could at least explain why

1

In CSS, the priority is thus

First comes any line of css that has !important, that will always come first

The second factor is the Inline Styles or Estilos em Linha which are those edited on the line itself and finally are all classes defined on the outside (documents .css) and definition of classes in tag <head>

Browser other questions tagged html css classes style

You are not signed in. Login or sign up in order to post.