CODEWITHSUNDEEP
htmlcsscss-selectors
Glen Robson
Glen Robson

Reputation: 938

CSS - Select first child with class

I have recently been trying to get my head around why this is not working. Ive started pulling my hair out trying to find a nice solution to a simple problem but every way that I can find to do this just seems messy. Basically what I would like to do is apply some styling to the first child with a specific class within a parent, in my example I am trying to apply a background color of red to the first instance of .class within each .parent. You can see my attempts in the fiddle here.

Here is the final code that I created that is working. The problem is that this seems very messy and I really dont like the fact that I have to set all of the .child classes to red then set all but the first back to white. There must be a cleaner/better way to do this?

HTML

<div class="parent">
    <p>Paragraph</p>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

<div class="parent">
    <p>Paragraph</p>
    <div>Broken</div>
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
</div>

CSS

/*** Does Not Work ***/
.child:first-child{
    background-color:#f00;
}

/*** Does Not Work ***/
.child:nth-of-type(1){
    background-color:#f00;
}

/*** Works But Is Messy! ***/
.child{
    background-color:#f00;
}
.child ~ .child{
    background-color:#fff;
}

Upvotes: 4

Views: 572

Answers (4)

Tom Durkin
Tom Durkin

Reputation: 99

I find ':first-of-type' works well for this kind of stuff: 

#parent .child:first-of-type {
  background: red;
}

You can also use the same for the last one if needs be: 

#parent .child:last-of-type {
  background: red;
}

Upvotes: -1

Eric MORAND
Eric MORAND

Reputation: 6786

If you don't mind changing your HTML markup, a solution would be:

<div class="parent">
  <p>Paragraph</p>
  <div>Broken</div>
  <div class="children">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
    <div class="child">Child 4</div>
  </div>
</div>

And:

.child:first-child{
    background-color:#f00;
}

See this fiddle.

Upvotes: 0

Johnny Juarez
Johnny Juarez

Reputation: 248

May be something like this:

.parent .child:nth-last-child(4) {
    background-color: #f00;
}

Demo

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114991

It's probably a bit much but you coud use :not and a universal selector * like so:

*:not(.child) + .child {
  color: red;
}
<div class="parent">
  <p>Paragraph</p>
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>

<div class="parent">
  <p>Paragraph</p>
  <div>Broken</div>
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>

Note: However, any break in the sequence (another non-child classed div followed by another child classed div) would repeat the selector.

JSfiddle Demo

Upvotes: 4

Related Questions