CODEWITHSUNDEEP
csscss-selectors
Garywoo
Garywoo

Reputation: 617

CSS selecting first within multiple elements of same name

I'm trying to select only one <a> within some elements that have un-uinique classes. I cant figure out the right selector to use to get it right.

Fiddle with my HTML and attempted selector

Can this be done by only editing the CSS?

Upvotes: 0

Views: 1511

Answers (4)

Sburke0708
Sburke0708

Reputation: 21

Don't forget, you can use "nth-of-type" ex:

.menu-name-main-menu > ul a:nth-of-type(1){background:red;}

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You have to specify the selector:

css

div.menu-name-main-menu > ul.menu > li.menu__item > a:not(:only-child) {
    background: red;
}

fiddle

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16841

Use > for imediate child select, and choose the first <li>, not the first <a>.

.menu-name-main-menu > ul > li:first-child > a {
background: red;
}

Updated fiddle: http://jsfiddle.net/5hjKP/1/

Upvotes: 1

jme11
jme11

Reputation: 17372

It can. Try this instead:

.menu-name-main-menu>ul>li:first-child>a {
    background: red;
}

So, this says, only select the direct child ul of the .menu-name-main-menu, then only its first child that is a direct child, then the anchor inside it.

Upvotes: 1

Related Questions