US $19.97

Advance CSS Selectors: The Complete Guide (2022 Edition)

——   Created by Rahul Giri

Learn to write highly effective CSS selectors like top 10% web developers and style any website without touching HTML.

Share this course:

2h 44m
Lesson time
Skill levels

More about this course

20 years ago when I could first write the CSS with html document, we had a limited set of selector choices like- element, classes, ids and descendant selectors.

But now we have dozens and dozens of powerful CSS selectors we can use in your CSS to write more powerful, optimized CSS selectors to maintain our stylesheet.

So in this class discover how to effectively leverage the power of selectors to select the elements you want to style without adding classes, changing HTML, or getting overly specific with your selectors.

In this course, I will demonstrate how to pinpoint specific parts (and groups of parts) in an HTML document using the powerful declarative syntax of CSS selectors.

I will cover combinator selectors, attribute selectors, pseudo-class and pseudo-element selectors, and the universal selector.

But that’s not all, there is a bonus video for you where i’ll show you how you can use CSS selectors with javascript to add dynamic behavior in your html document with real world examples.

Topics include:

  • Targeting elements, classes and IDs
  • Working with compound and group selectors
  • Targeting parent, child, and sibling elements (combinator)
  • Targeting element attributes
  • Targeting links with pseudo-class selectors
  • Targeting child elements and empty elements
  • Working with negation elements
  • Styling and validating forms
  • Matching pattern with Nth-child Selectors
  • Creating custom global variables
  • Using selectors with javascript.

Who this course is for:

  • New web enthusiasts and front-end developers
  • Complete beginners who wants to enhance their skill sets
  • Experts who wants to reinforce themselves
  • Anyone who wants to refresh knowledge
  • Web designers and developers
  • Developers who are tired of fighting with CSS
  • Professionals who wants to level up CSS skills

So if you’re ready to be one of the top 10% fronted developers then roll-up your sleeves, fire-up your code editor and let’s get started with CSS selectors- the complete guide.

The course project

So now that you have learned everything about CSS selectors, here is your project for this class.

Download this class project files from the resources i have attached here and create a project where you will add a toggle button. So if you click on the button it will strike out all the links that nofollow in that page and on the next click it will remove the strike.

Go ahead, complete this project, and post it into this section so I can review it.

31 Lessons

3 mins
CSS Terminology
free preview
5 mins
Element Selector
free preview
5 mins
Class Selector
5 mins
Id Selector
5 mins
Grouping Selectors
9 mins
Decdent selectors
6 mins
Parent Child Selectors
7 mins
Adjacent & General Sibling Selectors
3 mins
Attribute Selectors
8 mins
Exact and Any Word Attribute Selector
7 mins
Beginning and End Attribute Selectors
5 mins
Substring Attribute Selector
7 mins
Link Pseudo class Selectors
7 mins
Focus Selector
6 mins
Required, Optional and Checked Seletors
View more lessons +


100% of 1 people enjoyed this course!

Mark Dougal liked this class and said...

The Subtitle should be edited and add more language. It will help many people that not speak English as their mother language

About the instructor

Rahul Giri
Rahul Giri
  • 2 reviews
  • 8 courses

About —

After graduating and holding a degree in "information technology", my professional career beganstarting out a web development and graphics design career …

Read more
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today. ☝️

Class benefits

  • Certificate of Completion
  • 30 day satisfaction guarantee
  • 24/7 streaming access
  • Project included
  • Direct teacher access
  • 2h 44m of on-demand video
  • 1 downloadable file
  • Have a coupon?
  • Checkout