Use CSS sibling selectors instead :last-child (or :first-child)

Posted About 9 years ago. Visible to the public. Linked content.

Often times you want to give a bunch of elements the same style, except for the last. For example borders or margins.

You probably commonly used the :last-child CSS meta selector like so:

.foo {
  border-bottom: 1px dashed #000;
}
.foo:last-child {
  border-bottom-width: 0;
}

However, this only works when an element is the last child of its parent. Any other siblings which are unrelated to your case will break it.

Instead, prefer using the + sibling selector. It applies to the element following the other.

.foo + .foo {
  border-top: 1px dashed #000;
}

Note how we now use a top border instead of a bottom border. This is because we have to "reverse" the style to mimic the :last-child rule.

The plus sign means "adjacent selector". If you want to reach any subsequent sibling, use a tilde:

.foo ~ .foo {
  border-top: 1px dashed #000;
}

Examples

w3.org
Arne Hartherz
makandra.com
Say thanks1
Last edit
Almost 5 years ago
Jakob Scholz
License
Source code in this card is licensed under the MIT License.

Related cards:

FactoryGirl: How to easily create users with first and last name

In most of our applications, users have their first and last name stored in separate columns. However, specifying them separately quickly gets annoying, especially when proxying them from [cucumber_factory](https://github.com/makandra/cucumber_fac...

Use different CSS depending on whether elements render on the same line or multiple lines

You will find this useful when creating responsive designs that work well on small screens.

The attached Javascript gives a container different CSS classes (single_line or multiple_lines) depending on whether its children render on one line o...

CSS: Matching against attributes and their values (or parts of them)

You probably know that you can use CSS selectors to match against elements and their attributes, such as:

a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" *...

Use CSS attribute selectors with Capybara

You can use CSS attribute selectors in your step definitions like this:

Then /^the page should have a meta description "([^"]+)"$/ do |description|
  page.should have_css("meta[name=\"descript...

The JavaScript Object Model: A deep dive into prototypes and properties

Speaker today is Henning Koch, Head of Development at makandra.

This talk will be in German with English slides.

Introduction

As web developers we work with JavaScript every day, even when our backend code uses anothe...

You cannot use :before or :after on img in CSS

Though the W3C even gives it as an example, no browser actually supports this CSS:

img:before {
  content: "something";
}

Browsers will simply not render anything when doing that on image...

Rails: How to get the ordered list of used middlewares

Rails middlewares are small code pieces that wrap requests to the application. The first middleware gets passed the request, invokes the next, and so on. Finally, the application is invoked, builds a response and passes it back to the last middlew...

The Ruby Object Model

In Ruby (almost) everything is an Object. While this enables a lot of powerful features, this concept might be confusing for developers who have been programming in more static languages, such as Java or C#. This card should help understanding t...

Do not use "flex: 1" or "flex-basis: 0" inside "flex-direction: column" when you need to support IE11

Flexbox is awesome. Most of it even works in IE11, but flex: 1 won't work reliably in Internet Explorer.
This it because implicitly sets flex-basis: 0 which IE fails to support properly.

Example

Consider the following HTML and CSS.

<...

Hide the last bottom margin in a container

When you create e.g. a sidebar box that contains headlines and paragraphs, the final paragraph's margin in that box will create an undesired 'bottom padding' inside that box.

Here is a Sass mixin that you can apply to such boxes. It makes the las...

Posted by Arne Hartherz to makandra dev (2015-03-19 11:07)
This website uses short-lived cookies to improve usability.
or learn more