css - Apply a tag selector to the immediate parent of a rule within a deeply-nested structure -

there couple of similar questions i've found (like how specify html tag on less css nested class?), none of them seem work rules nested more 1 level deep.

here's structure have:

article {   .foo {     ...   } } 

here, .foo can 1 of many different types of element. sake of question, lets 1 of these elements a element. i'm wanting extend above structure select .foo element tag a within .foo rule.

the problem answer on question i've linked above, , various other similar questions, following not work:

article {   .foo {     a& { ... }   } } 

instead of prefixing .foo a tag, this:

article a.foo { ... } 

...the entire chain gets prefixed:

aarticle .foo { ... } 

(here's live example).

how can target .foo elements tag a within .foo rule?

looks you're getting tangled in wanting über-optimized less. if understand correctly, either way compiled css be

article .foo {     general `article .foo` styles } article a.foo {     additional styles specific `article a.foo` } 

in less write is, or

article {     .foo {         general `article .foo` styles     }     a.foo {         additional styles specific `article a.foo`     } } 

or depending on styles might able do

article .foo {     general `article .foo` styles } a.foo {     additional styles specific `a.foo` }