css - Is there a more elegant way of implementing a background color on a link that by targetting the id? -

i want make wordpress menu items have 2 different background colors: 1 link , 1 :hover. i'm css beginner , found solution unfortunately it's not 1 because target menu id generated wordpress , if delete menu , create one, id gone , styling not work anymore.

example:

menu-item-1212 { background-color:#fff; }  menu-item-1212 a:hover{ background-color:#000; } 

is there more elegant way solve no matter id first menu item have, retain background-color , hover one? i've searched online alternative , found :nth-child. did tried create this:(but didn't worked)

#menu-secondary li a:nth-child(1) { background-color:#fff; } #menu secondari li a:hover:nth-child(1) { background-color:#000; } 

will appreciate suggestion, thanks.

you targeting anchor nth child of li element. each li has 1 anchor probably. need target li nth child of menu, this:

#menu-secondary li:nth-child(1) {     background-color:#fff; } #menu secondari li:nth-child(1) a:hover {     background-color:#000; }