CODEWITHSUNDEEP
jquerycsscss-selectors
user3316979
user3316979

Reputation: 5

css find first child gives wrong result

I have:

<ul>
<li id="test1">The third paragraph.</li>
<li id="test1">The fourth paragraph.</li>
<li id="test2">The second paragraph.</li>
<li id="test2">The third paragraph.</li>
<li id="test2">The fourth paragraph.</li>
<li id="test3">The second paragraph.</li>
<li id="test3">The third paragraph.</li>
<li id="test4">The fourth paragraph.</li>
<li id="test4">The fourth paragraph.</li>
<li id="test7">The fourth paragraph.</li>
<li id="test7">The fourth paragraph.</li>
</ul>

And css code:

ul > #test4:first-child
{
background:#ff0000;
}

This code ul > #test1:first-child is good but ul > #test4:first-child not working

Demo where is the problem?

Upvotes: 0

Views: 91

Answers (2)

Roberto Linares
Roberto Linares

Reputation: 2225

It doesn't work because you are looking for a :first-child of the <ul> element which has an id named test4. What you want is the first element with id test4 and I think that's not possible with pure CSS.

Also, you should better use classes instead of IDs since you shouldn't repeat IDs in HTML elements.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

First, ID of an element must be unique,

Second :first-child will match only the first child element irrespective any other selector used for the child element, so in your case the first #test1 will be the only element matched by ul > :first-child selector

I don't think there is a css only solution for this.

Instead of ID use class attribute, then use the :first-selector in jQuery like

.someclass{
    //some rule
}

then

$('ul > .test4:first').addClass('someclass')

Upvotes: 1

Related Questions