00 Votes

CSS: First DIV without left border

Question by Guest | 2014-03-14 at 19:42

On my website, I have placed some DIV boxes side-by-side. Those containers have a float:left and a fixed width, so that they are arranged piece by piece next to each other.

Additionally, each container has a border-left to delimit the containers from each other.

Now, I would like to display the border between the containers in this way:

x|x|x|x|x|x|x

But at the moment, it is looking like that:

|x|x|x|x|x|x|x

So, the first border should not be displayed. Reluctantly, I would apply a border:none to each first container because depending on the page, other boxes can be at the first place making it very difficult to program and I would not like to have such an unclear code.

Is there any CSS property solving exactly this problem for me?

ReplyPositiveNegative
Avatar Stefan Trost
0Best Answer0 Votes

Yes. There is a possibility using pure CSS. It is the selector :first-child which is always selecting the first child within another element.

Assuming these are your boxes:

<div class="otherelement">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

All of them have applied the class "box" in which also the left border is defined:

.box{border-left: 1px solid #000;}
.box:first-child{border: none;}

In this case, you can use ".box:first-child" to address the first box and accordingly prevent this box from showing the border.
2014-03-16 at 16:10

ReplyPositive Negative
Reply

Related Topics

CSS: Include CSS Stylesheets in HTML

Tutorial | 0 Comments

jQuery: Show or hide DIV-Container depending on Checkbox State

Tutorial | 0 Comments

jQuery: Show a DIV - Hide other DIVs

Tutorial | 0 Comments

Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times

Tutorial | 0 Comments

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Comment

Darken Background of a Website (Gray Out Effect)

Tutorial | 0 Comments

Reload Images, CSS, JS and Web Pages despite Browser Cache

Tip | 2 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.