1

In my code, I have a structure such as:

<div class=block1">
..
</div>
<div class="block2">
</div>

These two blocks can be changed at the user's will through a page builder.

Now, it just so happens that block1 has some special CSS properties on its own that shouldn't exist when it has another special block (block2 in our case) next / before it.

block1 properties:

border-bottom: 1px solid black;
padding-bottom: 30px;
..
..

block2 properties:

margin-top: 30px;
border-top: 2px solid;

So you can see there are clashing properties and they'd look quite bad. My goal is to remove the properties from block1 and not block2. (I know I can remove from block2, but this is a perfect case where I can remove from block2 to make it work, but it's rarely this easy.)

Here's a visualisation:

How it should work.

This code allows me to tell if block2 comes after block1, like this:

.block1 + .block2 {
//If block2 is after, do some changes to block2
}

I'd want to affect .block1 instead, something like:

if(.block1 + .block2) -> .block1 {
    border-bottom: 0; //remove the border bottom so it doesn't look bugged.
    padding-bottom: 0; //cut the paddig since it's not necessary.
}

I couldn't find any solution to this except JS, I'm trying to come up with something written in CSS.

Daniel Moss
  • 447
  • 1
  • 5
  • 17
  • If you need `.block1` special CSS properties to apply if there is only one element of its kind consider using `.block1:only-child {...special styles}`, when there is more than one child of its kind any rules you've declared for the fall-back selectors `.block1 {...default styles}` will apply. https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child – UncaughtTypeError Oct 13 '17 at 20:43
  • @Paulie_D What I love about the duplicate is when it is of no help really, solving nothing ... , okay: obviously it says there is no previous selector ... but is there the 'howto' clearly answered to this case ? ( there is too many alike duplicate to pick up the most relevant :( ) – G-Cyrillus Oct 13 '17 at 21:59

1 Answers1

1

what you need to do is :

  1. apply same style to every div
  2. reset style from the last div you wished to style

example on hover :

div, h1 {
  padding: 0.1em;
  color: blue;
  border: solid;
  margin: 0.25em;
}

article div:hover~div,
.end,
.end  ~div,
h1{/* reset here whate ever you need */
  color: initial/* foo example */
}
<article>
  <div><h1>test hovering to see it working.</h1></div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
</article>
<hr/>
<section>
  <div><h1>test via class, same selector involved</h1></div>
  <div>Do i have any-style ?</div>
  <div class="end">Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
  <div>Do i have any-style ?</div>
</section>

CSS has no "previous sibling selector".

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • This could work for me, but my structure is `body -> block1 -> block2 -> block3`, I understand these blocks are part of the `body` and are at the same level, but I just can't get this to work. – Daniel Moss Oct 13 '17 at 21:16
  • what is your actual structure and class names ? blockx are siblings or children ? – G-Cyrillus Oct 13 '17 at 21:20
  • They are siblings, here's a codepen of my exact structure: https://codepen.io/anon/pen/qPMKBa – Daniel Moss Oct 13 '17 at 21:25
  • @DanielMoss if one or 2 div , then :only-child would do https://codepen.io/gc-nomade/pen/PJdapd What would it be with a third one ? – G-Cyrillus Oct 13 '17 at 21:49