CODEWITHSUNDEEP
htmlcss
Jamie Fearon
Jamie Fearon

Reputation: 2634

Select the first <h3> element after a class definition

I have the following code:

<div class="wrapper">
    <div class="location info">
        <h3>Location</h3>
        <h3>should be no stlye</h3>
    </div>
    <div class="skills info">
        <h3>Skills</h3>
        <h3>should be no stlye</h3>
    </div>
</div>

I'm trying to style the first h3 element after an info class. I thought this should work, but it dosen't:

.info:first-child {
    color: color: rgb(200,50,50);
}

Why isn't this working? How should I style the first element in . info without adding extra markup in the html?

Upvotes: 0

Views: 11785

Answers (5)

stillatmylinux
stillatmylinux

Reputation: 1429

If your h3 tag is not the first child element you can use

.info > h3:first-of-type {
    color: rgb(200,50,50);
}

Upvotes: 0

gilly3
gilly3

Reputation: 91567

You need a space:

.info :first-child

The first-child pseudo element describes the element itself, not the children of the element. So, without the space you are selecting elements with a class of info that are the first child of their parent.

The space specifies that you are looking for descendants of .info. Since you are looking for just direct children, you should use the child combinator - >, and probably also specify only h3 elements:

.info > h3:first-child

Edit: I only noticed the problem with the selector. As mentioned in other answers (+1 to user1479606), you have a typo in your style definition as well: color: color: ... should be color: ....

Upvotes: 4

deviousdodo
deviousdodo

Reputation: 9172

You're not far away, try this:

.info > h3:first-child {
    color: rgb(200,50,50);
}

But instead of using something like this, I believe the best approach would be to add a meaningful class to the first h3 - this will make reading the CSS and markup much easier in the future and it will prevent unexpected behavior when editing your markup. For example:

.info-title {
    /* your styles here */
}

Upvotes: 4

pdoherty926
pdoherty926

Reputation: 10379

I'm trying to style the first h3 element after an info class.

.info > h3 {
    color: rgb(200,50,50);
}

Upvotes: 0

Eli
Eli

Reputation: 14827

Your css is not correct, you only need to specify color once. You also need to make a more slightly change to your selector:

.info > h3:first-child {
    color: rgb(200,50,50);
}

Demo: http://jsfiddle.net/WSZcS/

Upvotes: 1

Related Questions