CSS heritage in Divs

Asked

Viewed 334 times

1

I’m having trouble editing some legacy Ivs. Let’s take a look at the example:

This is the current code:

<div id="conteudo">
  <div class="titulo">xxx</div>
  <div class="texto">xxx</div>
  <div class="antesDepois">xxx</div>
  <div class="autor">xxx</div>
  <div class="tags">xxx</div>
  <div class="comentários">xx</div>
</div>

All right, in view of this, the css of these Ivs is already done. Only the Conteudo div is putting everything inside a single box. I was wondering if it’s possible for me to "split" this box in half.

For example, before the div class="antesAfter" i would like to put a division. Then put a division again in the div class"author" and so on.

Then you tell me, but man.. Just you close the div content that and open a new div before the beforeAfter.. Just not, I can’t, because Divs are inheriting a lot of stuff from the contents.. And there’s a lot of stuff...

I know I should have done this before, but I’m editing a code that’s already been produced..

So there’s BIG DOUBT. I can do something about it?

html css div inheritance
  • 2

    Can you explain better what you mean by "split in half"? Have you tried nth-child?

  • And you can’t close and open another div with class conteudo. So the other elements will continue to inherit whatever.

  • @Miguelangelo Wow, it’s true.. This will solve my problems for now..

  • I submitted it as an answer then... since that is acceptable. If you encounter a problem that prevents you from using this solution, just leave a comment and I’ll change the answer.

  • 1

    @maxxzag can answer my question above?

  • @Sergio Claro, let’s say that the div "content" has a css with background-color: #00; therefore, all the other Ivs are also with this background. I wish there was a divider between the Divs "text" and "beforeAfter". But I couldn’t do it just by changing the background because there was padding involved, margin and other things.. And I wish these things weren’t included in the Ivs. Miguel’s response helps because I create another div with the same class and these continue with the inheritance they had.

  • use a parent div as container for your separation, then you can leave the behavior from the above item, ie your container.

  • But didn’t you say you couldn’t change the HTML? or got it wrong here: "Just not, I can’t, because the Ivs are inheriting various things from the content divide.. " ?

Show 3 more comments

2 answers

2

If you can close and open another div with class conteudo the other elements will continue to inherit whatever.

You will need to change the attribute id for class, if you want to keep the HTML correct. You also need to change the id selectors you use # for class selectors ., in CSS and also using jQuery.

Thus:

<div class="conteudo">
  <div class="titulo">xxx</div>
  <div class="texto">xxx</div>
</div>
<div class="conteudo">
  <div class="antesDepois">xxx</div>
  <div class="autor">xxx</div>
  <div class="tags">xxx</div>
  <div class="comentários">xx</div>
</div>
  • 1

    @Sergio My... I didn’t even notice. Thanks! I changed the answer.

0

You can select the nths div children with CSS3, using element:nth-child(n) and thus apply a "division" of styles internally.

It is also possible to select a range of children.

For example; if you want to select only .antesDepois and .autor. That way, we want the 3rd and 4th children. A style would look like this:

#conteudo div:nth-child(n + 3):not(:nth-child(n + 5)) {
  margin-top: 15px;
  color: red;
}

In my example, I also used the selector :not to help legibility.

If you want, read more about selectors in W3schools.

Browser other questions tagged html css div inheritance

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