CODEWITHSUNDEEP
htmlcss
Mia
Mia

Reputation: 6531

css - group same classes following each other

I currently have a structure like this:

<div class="a">Something</div>
<div class="a">Something</div>
<div class="a">Something</div>
<div class="b">Something</div>
<div class="b">Something</div>
<div class="a">Something</div>

How can I group same classes together? In this example, I want to have all class a items have no margin inbetween and all classb items have no margin inbetween however they should have margins between different classes.

With the following path it's possible to a certain extent:

div {
 margin-top: 20px;
}
.a+.a, .b+.b {
 margin-top: 0px
}

however my whole html structure works with margin-bottoms -- therefore I'm looking for a similar solution that'll work with margin-bottom's instead of margin-top's.

Upvotes: 0

Views: 1439

Answers (5)

vals
vals

Reputation: 64264

In CSS3, most of the selectors work following the flow of the DOM.

That means that there is not way to give style to an element based on which elements will occur after the element. (The only exception to this being nth-last-child pseudos).

To get the result that you want, you need to be a luittle tricky, play with the top margin, and set it to minus the bottom value. (So the total is 0) 

div {
  height: 50px;
  margin: 10px;
}

.a {
  border: solid 1px red;
}

.b {
  border: solid 1px green;
}

.a+.a, .b+.b {
   margin-top: -10px;
}
<div class="a">Something</div>
<div class="a">Something</div>
<div class="a">Something</div>
<div class="b">Something</div>
<div class="b">Something</div>
<div class="a">Something</div>

Upvotes: 0

Mia
Mia

Reputation: 6531

Here is what I currently use - if there is no answer I'll mark this as the solution

http://codepen.io/anon/pen/vNRrdo

<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="b">Class b</div>
<div class="c">Class c</div>
<div class="c">Class c</div>
<div class="c">Class c</div>
<div class="c">Class c</div>
<div class="a">Class a</div>
<div class="a">Class a</div>
<div class="b">Class b</div>
<div class="b">Class b</div>
<div class="b">Class b</div>
<div class="a">Class a</div>
<div class="c">Class c</div>
<div class="c">Class c</div>

css

div {
  width: 200px;
  text-align: center;
  line-height: 50px;
  margin-top: 20px;
}

.a {
  background-color: red;
}

.b {
  background-color: blue;
}

.c {
  background-color: green;
}

.a + .a {
  margin-top: 0;
}

.b + .b {
  margin-top: 0;
}

.c + .c {
  margin-top: 0;
}

The problem with this one is that this one uses margin-top. My whole page structure uses margin-bottom -- therefore I'm looking for a margin-bottom solution that works in a similar way without manual customization for every single element type.

Upvotes: 1

SomeDude
SomeDude

Reputation: 23

Or you can simply give create a margin-bottom class and apply it to your img tags that you want to effect.

<img src="image.png/>
<img src="image.png/>
<img src="image.png/>
<img src="image.png/>
<div>Something</div>
<img class="botMargin" src="image.png/>

.botMargin {
    bottom-margin: 20px;
}

Upvotes: 0

Kristijan Iliev
Kristijan Iliev

Reputation: 4987

It is possible using sibling selector. I added into the snippet below divs and a span to illustrate the point. You can set the margin to the span using class or id, but this way you can apply it more generally, wherever you have div followed by span, do the margin (or whatever style your want to apply)

div, span{
    border: 1px solid blue;
    display:block;
    width: 100px;
    height: 30px;
}
div + span {
    margin:10px;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<span>1</span>
<div>5</div>

Upvotes: 2

kishan
kishan

Reputation: 301

You can do this by using jQuery.

$( "img" ).next( "div" ).css('margin','10x 0px');

Upvotes: -1

Related Questions