Reputation: 5107

css first-child selector help

Is there a way to highlight the first link, and only the first link, directly below a list item with class "selected"?

Here is my js fiddle

Upvotes: 1

Answers (3)

Reputation: 588

You can use the first-child selector.

.selected > a:first-child {
    color: red;
}

You can use nth-child() to do this as well.

.selected > a:nth-child(1) {
    color: red;
}

.selected > a:nth-child(1n - 1) {
    color: red;
}

Upvotes: 1

Reputation: 913

.selected > a:first-child {color:red;}

This should work in your case.

Upvotes: 0

Reputation: 8125

Yeah, use

.selected > a:first-child {
    /* CSS */
}

> limits the selector to direct children.

Upvotes: 3