Reputation: 481

CSS selector: first div within an id or class

What is the proper CSS selector to select the first div within a class or with a specific id? This seems to be much easier with parent/child elements but I haven't found anything for simple elements.

Update: solution

The cleanest, most compatible solution I found was .class ~ .class which selects all the latter classes that follow the former class. For example, if you wanted to remove the top border from the first element within its class you would:

<style>
    .dolphin {
        border-top:0;
        }
    .dolphin ~ .dolphin {
        border-top:1px solid #000;
        }
</style>

Upvotes: 20

Answers (6)

iConnor

Reputation: 20209

To select the first div in a class I would recommend using this method :

.yourClassName > div:first-child{
   // Your properties
}

Same if you want to select within an id, just do this :

#yourUniqueId > div:first-child{
   // Your properties
}

But if you do have an id, your should ONLY have one anyway. Otherwise you would be coding Invalid HTML. Just use a simple selector like this for id's :

#yourID{
    // Your Properties
}

Also note, that in @sourcecode's answer, he doesn't currently have the > in his example. Without this it will not select the first div within a class but will rather select every first div within that class. Check this fiddle out for an example of that :

Demo First Selector from each group

and here is a demo of my answer :

Demo First Selector ONLY

Upvotes: 19

Mike Kormendy

Reputation: 3475

Some of the answers don't address the valid scenario where you may have the element in different locations on different pages of your website, but you ONLY want to style for the pages only where it shows up as the first child in that group.

The following solution answers the OP's question on selecting the first element with a specific ID:

.something div{
    background:blue;
    width:10px;
    height:10px;
    margin:20px;
}

.something div:first-child{
    background:red;
}

.something div#test:first-child{
    background:yellow;
}

<div class="something">
    <div id="test">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Upvotes: -1

designcise

Reputation: 4372

You can use the following pseudo classes:

:first-child
:nth-child(1)

Or you can select by ID:

#elementID
div[id="elementID"]

The difference between the above two is in specificity; using "#elementID" would have a higher specificity (precedence) than using the attribute selector "div[id="elementID"] but both are correct ways of selecting the element.

Upvotes: 0

user2019515

Reputation: 4503

If you want to select the first div within a specific class then you can use:

.class div:first-child

This however won't work when you've got the following HTML:

<div class="class">
    <h1>The title</h1>
    <div>The CSS won't affect this DIV</div>
</div>

It won't work because the div isn't the first child of the .class. If you wan't to target that div in this case I'd suggest adding another container (or adding a class to that div whatever you like :) )

Upvotes: 35