The CSS that you know nothing about — Part 1

Michael Weaver
Oct 22, 2014 · 4 min read

New Blog Post

Okay, okay, I can’t actually guarantee that statement, but there is a very good chance you haven’t come across or used the following…

Root Selector

Using root allows you to select the highest level parent element in the DOM. If you are writing HTML, then the html element will always be the highest.

Because Pseudo-class selectors have a higher specificity than that of targeting an element, you can overwrite <html> element styling with :root.

Browser Support

The following specifies the first browser version that fully supports the selector.

Chrome: 4.0
Internet Explorer: 9.0
Firefox: 3.5
Safari: 3.2
Opera: 9.6


First Line

The ::first-line selector allows you to select the first line in a paragraph. There are other selectors out there which allow you to select the first paragraph, but having the ability to style the first line, opens up considerably more design possibilities.

This pseudo element only works on block elements (when display is set to either block, inline-block, table-caption, table-cell).

Even better news is this selector is so specific, it can even override !important declarations.

Browser Support

The following specifies the first browser version that fully supports the selector.

Chrome: 1.0
Internet Explorer: 9.0 (partial from 5.5)
Firefox: 1.0
Safari: 1.0
Opera: 7.0 (partial from 3.5)


First Letter

Very similar to the example above, this selector allows you to target the very first letter in a block element. This will come in handy for instance when styling a drop cap.

Browser Support

The following specifies the first browser version that fully supports the selector.

Chrome: 1.0
Internet Explorer: 9.0 (partial from 5.5)
Firefox: 1.0
Safari: 1.0
Opera: 7.0 (partial from 3.5)


Not Selector

The :not(x) selector allows you to target elements which you haven’t specified. I may have terribly explained this but below is an example…

You could select all list items without the class “active” by doing the following…

This can be especially powerful when adding styling to navigation elements such as the one above.

Browser Support

The following specifies the first browser version that fully supports the selector.

Chrome: 4.0
Internet Explorer: 9.0
Firefox: 3.5
Safari: 3.2
Opera: 9.6


Adjacent sibling combinator

Technically this isn’t a selector of its own, but it is a way of bringing together two selectors.

Making use of the + sign you can select an element directly after another one.

Below is an example…

By using the following CSS…

would make the second paragraph element bold.

Browser Support

The following specifies the first browser version that fully supports the selector.

Chrome: Any
Internet Explorer: 7.0
Firefox: Any
Safari: Any
Opera: Any


General Sibling Combinator

This combinator allows you to make use of the hierarchical structure of the page you are styling.

For instance using the above code would only effect paragraph elements after that of a figure element.

Below is an example of how you could use this…

Browser Support

The following specifies the first browser version that fully supports the selector.

Chrome: Any
Internet Explorer: 7.0
Firefox: 1.o
Safari: 3.0
Opera: 9.0


Conclusion

The fact is, this is just scratching the surface of what is available using CSS.

In the next part we will look at some more selectors, even some experimental ones if you are lucky…

I’d love to hear your feedback or suggestions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store