CODEWITHSUNDEEP
htmlcsspseudo-classcss-selectors
SQRCAT
SQRCAT

Reputation: 5840

: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?

Upvotes: 16

Views: 25929

Answers (3)

Yogesh Sudha
Yogesh Sudha

Reputation: 1

<!DOCTYPE html>
<html>
  <head>
    <!-- <link href="sa.css" rel="stylesheet" /> -->
    <style>
      .try p:first-child {
        color: rgb(26, 184, 40);
      }
      .try p:last-child {
        color: red;
      }
      .try p:nth-child(2) {
        color: blue;
      }
    </style>
    <title>By using this way we can able to use any selectors using child concept</title>
  </head>
  <body>
    <div class="try">
      <p>hi</p>
      <p>buddy</p>
      <p>hru</p>
    </div>
  </body>
</html>

Upvotes: 0

Linus Caldwell
Linus Caldwell

Reputation: 11088

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.

Upvotes: 5

Yogu
Yogu

Reputation: 9455

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;
}

Upvotes: 25

Related Questions