Adventures in CSS

Currently reading Eric Meyer’s CSS – The Definitive Guide. Highly recommend it for the web developer that needs a more thorough understanding of CSS.


Partial attribute selectors; you probably know CSS can select elements based on attributes, e.g. input[type="email"]. Partial attribute selectors allow matching of attribute values
div[data-ui-type="modal overlay"] – this will match on the entire string
div[data-ui-type~="modal"] – the tilde will break up the attribute value into space separated values and match on a separated value
div[data-ui-type^="mo"] – matches any element that the starts with the attribute value
div[data-ui-type$="lay"] – matches any element that the ends with the attribute value


More than one CSS selector can match the same element, and in the case where both define a similar rule, e.g. background-color, the specificity level of the selector decides which rule is chosen. Inline styles are #1 in priority, followed by id at #2, class at #3, and element and pseudo-element selectors bring up the rear. However, if there’s a need for a lower ranked selector to override a rule, the !important keyword can be inserted just before the semi-colon for the rule, and it will override higher precedence selectors.