The CSS that you know nothing about — Part 1

Root Selector

:root { }
Using :root to change the background colour

First Line

::first-line { }
Changing the colour of the first line of the paragraph element

First Letter

::first-letter
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

Not Selector

:not(x)
<ul>
<li>List Item</li>
<li>List Item</li>
<li class="active">List Item</li>
<li>List Item</li>
</ul>
ul li:not(.active) {}
using the :not() selector to target all list elements without the class “active”

Adjacent sibling combinator

span + span
<section>
<blockquote>Lorem ipsum blah blah blah</blockquote>
<p>Lorem ipsum blah blah blah</p>
<p>Lorem ipsum blah blah blah</p>
</section>
blockquote + p { font-weight: bold; }
Styling the paragraph straight after the blockquote element using the adjacent sibling combinator

General Sibling Combinator

figure ~ p {}
Using the general sibling combinator to target all paragraphs after the first.

Conclusion

--

--

--

Front-End & WordPress Developer

Love podcasts or audiobooks? Learn on the go with our new app.

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
Michael Weaver

Michael Weaver

Front-End & WordPress Developer

More from Medium

Final Fantasy Origin Stranger in Paradise, the First Several Hours

Do you know about technologie Vue.js?

Survey Junkie Review: Earn $20 Every Day

PLAY TO EARN VS PAY TO WIN