Css selector shorthand query?

HTML & CSS
1

Hi all,


#main-nav li a.current, #main-nav li a.current:hover{
		border-top: 0;
	}

In the code above Im using the same selector for each, can this be shortened so that the selector only has to be typed once?

something like?


#main-nav li a.current + li a.current:hover{
		border-top: 0;
	}
2

If the same thing is happening on hover then you can remove the hover portion completely.

3

Hi Eric,

Thanks for the reply, the above code is just a random example. Im more interested in whether or not I can get round adding long winded css

4

oh ok. Uhmm don’t now?

5

No, you can’t mess with a grouped selector “…, …” and make it an adjacent sibling selector “… + …”.

The only shorthands CSS has are the shorthand properties. Selectors can’t be made a shorthand in CSS, since they are much like regular expressions. You can’t shorthand a regular expression, since you already use a regular expression to shorthand a pattern. Messing with it means messing with the pattern, so anyhthing just loses any logic, pointing in the wrong direction. The same with CSS selectors, they will point out to something different if you play like that with them.

6

thanks noonope, just thought id post this query on the off chance that there might have been a technique but thats fine.

Thanks for your help

7

No problem.

The fact of the matter is, this question has been asked many times. It’s just not possible with pure CSS. There are some libraries that implement these shorthands, but they stand as an additional layer between you and your CSS, interpreting their own scripted language and putting back for you the needed CSS. I never find this to be useful on the long term nor helpful in better understanding CSS.