The CSS that you know nothing about — Part 1

Michael Weaver
4 min readOct 22, 2014

--

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

:root { }

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.

Using :root to change the background colour

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

::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).

Changing the colour of the first line of the paragraph element

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

::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.

This is an example of a basic drop cap effect using the ::first-letter selector
Here is an example of a drop cap — something you could easily achieve using the ::first-letter selector. — image is a screenshot from dailydropcap.com

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

:not(x)

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…

<ul>
<li>List Item</li>
<li>List Item</li>
<li class="active">List Item</li>
<li>List Item</li>
</ul>

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

ul li:not(.active) {}

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

using the :not() selector to target all list elements without the class “active”

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

span + span

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…

<section>
<blockquote>Lorem ipsum blah blah blah</blockquote>
<p>Lorem ipsum blah blah blah</p>
<p>Lorem ipsum blah blah blah</p>
</section>

By using the following CSS…

blockquote + p { font-weight: bold; }

would make the second paragraph element bold.

Styling the paragraph straight after the blockquote element using the adjacent sibling combinator

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

figure ~ p {}

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…

Using the general sibling combinator to target all paragraphs after the first.

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.

--

--