CSS Inheritance in Divs

Question

CSS Inheritance in Divs

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I'm having trouble editing some inherited divs. Well let's 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>

Right, with this in mind, the css of these divs is already done. Only the Content div is putting everything inside a single box. I wanted to know if it is possible for me to "split" this box in half.

For example, before the div class="before After" I'd like to put a split. Then put a div again in the div class "author" and so on.

Then you talk to me, but dude .. You just close the div content and open a new div before before .. Just no, I can not, why the divs are inheriting several things of the content div .. And are many ..

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

Then there's the GREAT DOUBT. Can I do something about it?

html css div

asked by anonymous 24.03.2015 / 23:11

2 answers

Uncaught InvalidStateError: Failed to execute 'send' on 'WebSocket' List tables by foreign key in MySQL

score 2 · Answer 1

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 id attribute to class if you want to keep the correct HTML. You'll also have to change the id selectors that use # for class selectors . , in CSS, and also use jQuery.

So:

<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>

score 0 · Answer 2

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

You can still select a range of children.

For example; if you want to select only .antesDepois and .autor . In this way, we want the 3rd and 4th children. One 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 :not selector to help readability.

If you want, read more about the selectors in W3Schools.