CODEWITHSUNDEEP
css
alias51
alias51

Reputation: 8608

How to use CSS selectors in CSS3

I have the following HTML:

<div class="row">
<p> Text </p>
</div>

<div class="row">
<p> Text </p>
<p> Text </p>
</div>

I want to apply different styles to all elements that are an only child in the row. I know I can do this for the para as below:

.row p:only-child{

//apply your styles 

}

My question is simple: Is there any shorthand way to apply the ::only-child styling to all elements in the row parent (e.g. other divs), or do I have to mark it up endlessly as:

.row .class1:only-child{

//apply your styles 

}

.row class2:only-child{

//apply your styles 

}

Upvotes: 0

Views: 73

Answers (2)

LoveAndCoding
LoveAndCoding

Reputation: 7947

There are two different levels of this:

.row *:only-child

Selects all children of .row that are the only child, where as

.row > *:only:child

Selects all the direct children of .row that are the only child. Note that you don't actually need the * as it will be implied if you just use the :only-child selector. Which would make your selector look like .row > :only-child.

So, in the following example:

<div class="row">
    <p id="p1">Text goes here</p>
</div>
<div class="row">
    <p id="p2"><span id="span1">Text</span></p>
    <p id="p3">More text is here</p>
</div>

The first selector will select #p1 and #span1, where as the second will only select #p1

Upvotes: 4

amdorra
amdorra

Reputation: 1556

you could do

.row .class1:only-child, .row.class2:only-child{
    //apply your styles
}

Upvotes: 1

Related Questions