Reputation: 5840
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
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
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
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