CODEWITHSUNDEEP
htmlcss
Ihor Tkachuk
Ihor Tkachuk

Reputation: 1118

How to delete first pseudo after

I have three div and that are interconnected gray line.

Html code:

<div class="col-xs-3">
    <div class="middle-blue-bg">
        <!--Content-->
    </div>
    ...
</div>

CSS:

.middle-blue-bg:after {
    background: #e2e2e2;
    height: 4px;
    width: 127px;
    content: '';
    display: block;
    position: relative;
    top: 98px;
    left: -137px;
}

I need to remove the first line. How to do it?

Upvotes: 0

Views: 35

Answers (3)

Michał Kutra
Michał Kutra

Reputation: 1202

I think all You need is change your styles a little. Here's example http://jsfiddle.net/59boz0wL/

I've changed position: relative and remove some other stuff to make it more clear. Hope it helps.

Upvotes: 1

Billy
Billy

Reputation: 2448

First child will do the trick, hust so you know there is also a last-child and nth-child

div {border:2px solid red;display:inline-block;width:50px;margin:2px;}
div:first-child{border-left:none;}
div:last-child{border-right:none;}
div:nth-child(4n){border:4px solid blue;}
<div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div><div>&nbsp;</div>

Upvotes: 0

eithed
eithed

Reputation: 4320

You can use nth-child property, as - .middle-blue-bg:nth-child(n+2):after to affect every element but first.

Fiddle: http://jsfiddle.net/pwrx0cww/1/

Upvotes: 1

Related Questions