I’m going to begin with a provocative claim: I believe CSS is one of the most difficult-to-master computer languages we have. It doesn’t have a complex syntax and you certainly don’t need a doctorate in IT to understand it. However, it’s one of the only popular languages that isn’t “logical” — and I mean that in the most literal sense.
The Cascade is a metaphorical term for the syntax behind CSS. It calculates elements such as origin, specificity, order and importance by using special glyphs, known as combinators, to target elements (and pseudo-elements) and style them accordingly. No single article could do CSS syntax the justice it deserves — that’s what W3 Specs and Dan are for. However, assuming you already know a thing or two about CSS, let’s examine some lesser-known combinators and not how, but when to use them.
At design school we were all taught about classes and IDs, using
#respectively, to directly target elements. That’s enough control to build a functional website — but it’s not flexible enough to handle a complete design shift. It also creates a lot more work than needed by using presentational values within markup. Let’s take a look at an alternative approach to targeting those difficult-to-get-to elements.
pelements that appear directly after an
h1element in the DOM. Typographic theory suggests that we should indent paragraphs in body copy, but only if they succeed another paragraph. A practical use for this selector, then, is to add
text-indentvalues to paragraphs without targeting the first in a tree, like so;
text-indentand zeroing out the first one with
class="first"any day. Three lines, no classes and solid browser support. If you’re nesting your content-level
imgtags inside your
ptags (and you should be) then we can simply pull their left margins back with a negative value of
:first-lineis a CSS 2.1 approved pseudo-element, the
::notation has been introduced at CSS level 3 in order to establish a discrimination between pseudo-classes and pseudo-elements.
The Child CombinatorA common markup protocol is to wrap your top-level sections in an element named something along the lines of
#pageparent to avoid hitting them when/if outside of this selection:
*, likely through a browser reset or similar. When we combine this with the child selector, we can target all elements that are direct descendants of
#pagewithout hitting their grandchildren or beyond:
footerelements without touching
String and Substring Attribute SelectorsAttribute selectors are one of the most powerful we have. They too have been around to some degree since CSS 2.1 and are commonly found in the form of
a[href="#top"]. However, CSS3 introduces a deeper level of control in the form of strings and substrings.
Note: up until this point, everything we’ve discussed has been CSS 2.1 standard, but we’re now stepping into CSS3 territory. We’ll leave it at the presentational layer, so it’s OK to use these right now.
We have four primary attribute string selectors available to us, where ‘v’ = value and ‘a’ = attribute:
- v is one of a list of whitespace-separated values:
- a begins exactly with v:
- a ends exactly with v:
- a contains value:
hrefattribute to find a keyword. We can then progressively enhance these links, like so:
Structural Pseudo-ClassesLastly, I want to outline the benefits of structural pseudo-classes, not to be confused with pseudo-elements or link and state pseudo-classes. We can use these to target elements based on their position within the DOM, rather than their contents. A fine example of when to use a structural pseudo-class can be to target the first (or last) element in a tree of elements, or to alternate between odd and even elements:
:first-childis the only pseudo-element available in the CSS 2.1 spec. All other pseudo-elements, including
:last-child, are CSS3 standards.
The key to structural pseudo-elements, however, is when not to use them. They should be strictly reserved for when selectors relate to the position of an element and not its contents. If an element must be styled in a certain way regardless of its position in the DOM, that’s when you should be using a more meaningful, semantic selector, such as a class, ID or string.
Better Semantics with CSS Combinators & Selectors Reviewed by Aamir Pathan on 1:31 PM Rating: