The CSS that you know nothing about — Part 1
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.
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).
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-letterVery 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
: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.
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 + spanTechnically 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.
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…
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.
