Element seems to inherit class from sibling

Question

I'm implementing a simple two columns layout, where elements on the left column floats to the right and viceversa.

These are the class definitions:

.row {
  display: table;
}

.column {
  float: left;
  width: 50%;
}

.column > h3, p, img {
  width: 50%;
  height: auto;
  margin: 2%;
}

.left { text-align: right; }

.right { text-align: left; }

.left > h3, p { float: right; text-align: right; }

.right > h3, p { float: left; text-align: left; }

While this is the HTML structure:

<div class="row">
  <div class="column left">
    <h3>My title</h3>
    <p>My paragraph.</p>
  </div>
  <div class="column right">
    <img src="images/my-image.jpg">
  </div>
</div>

The strange thing here is that while the h3 element floats to the right as expected, the p element stays on the left. If I inspect it, I see that both the .right > h3, p and the .left > h3, p styles are being applied, but I don't see why the first one since it's a .left element's child, not .right.

What am I missing here?

Why floats? There are way better alternatives, like `flex` or `grid` — Mr T, Jun 23 '20 at 09:50
`.right > h3, p` means "select h3s that are a direct child of .right. Also, select _all p tags in the document"_. Perhaps you meant `.right > h3, .right > p` — Turnip, Jun 23 '20 at 09:50

score 0 · Accepted Answer · answered Jun 23 '20 at 09:52

0

If I understand correctly of what you want to achieve you need to specify the p tag as well, like so:

.left > h3,
.left > p { float: right; text-align: right; }

.right > h3,
.right > p { float: left; text-align: left; }

answered Jun 23 '20 at 09:52

Smlok

477
4
12

Of course, silly me... Thank you very much! – kairos Jun 23 '20 at 09:54
No problem! If it suits you, I'd appreciate if you accepted this answer as completed :) – Smlok Jun 23 '20 at 09:55
I tried, but I need to wait a few minutes. Will do in a bit! – kairos Jun 23 '20 at 09:57

Element seems to inherit class from sibling

1 Answers1