Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

:first-child and :last-child simultaneously

This may be very easy as i have a feeling i'm missing a basic point here.

Situation:

.singleOrder:first-child {
    border-radius: 5px 0 0 0;
}

.singleOrder:last-child {
    border-radius: 0 5px 0 0;
}

Works really well until there is only one child. In that case the second declaration will overwrite the first one and the desired effect will not be achieved.

What is the most short and elegant way to solve this?

like image 533
SquareCat Avatar asked Mar 14 '13 17:03

SquareCat


People also ask

How do I apply for CSS with first child and last child?

How to select an element that is the first or last child of its parent. The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes.

What is the difference between first child and first of type?

The :first-child: The :first-child selector is used to select those elements which are the first-child elements. For :first-child selector the <! DOCTYPE> must be declared for IE8 and earlier versions. The :first-of-type: The :first-of-type Selector is used to targeting the first child of every element of it's parent.

How do I get my first child on SCSS?

The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.


2 Answers

Split it:

.singleOrder:first-child {
    border-top-left-radius: 5px;
}

.singleOrder:last-child {
    border-bottom-left-radius: 5px;
}

Or write an extra rule:

.singleOrder:first-child:last-child {
    border-radius: 5px 5px 0 0;
}
like image 104
Yogu Avatar answered Sep 27 '22 21:09

Yogu


Use :only-child:

.singleOrder:only-child {
    border-radius: 5px 5px 0 0;
}

Update: Yogu is right. I forgot to mention. This should come after your statements.

like image 34
Linus Caldwell Avatar answered Sep 27 '22 20:09

Linus Caldwell