Skip to:

Re: Member and Groups CSS differentiation

Yep decedent selectors are actually the space you might leave between the selectors, a space says that the selector/element on the extreme right has to have a parent or ancestor/antecedent that matches to the one on the left thus:

#my-element a {} means that the anchor will only have these styles if it is nested at some point in an element named as #my-element.

At some point is important as a descendant selector denotes a hierarchy to any level or depth, that anchor can be further nested in a dozen elements.

So if you had styles for avatar that ran something like this:

li div.item-avatar a.avatar {}

but you wanted to change it in some way for say the account page ‘friends view’

then you could do:

body.friends li div.item-avatar a.avatar {}

It all depends on how the original has been styled as to how you override it and you have to be aware of the specificity of the selector rule or the ‘weight’, if the original styles using selectors like this:

#some-id #another-id li div.item-avatar a.avatar {}

then you new rule will not override it as each selector carries a weighted value and ID’s carry the heaviest value so their selector group trumps yours, you would need to add a few IDs or match IDs until your selector set had a higher value.

Skip to toolbar