Mastering CSS3 Selectors

Ace at CSS3 Selectors to tackle the most important aspect of web designing – the power of selection
3.9 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
84 students enrolled
Take This Course
  • Lectures 14
  • Length 2 hours
  • Skill Level Expert Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2016 English

Course Description

If HTML is the skeleton of a web page, CSS is its flesh. To create amazing websites, web developers need to master CSS Selectors, which are the most critical things in the modern Web and form the backbone of CSS designs. Third-party tools such as jQuery are popular mainly because they allow you to select elements with ease using CSS selectors. Selectors in CSS allow designers to access HTML elements to enhance and manipulate the appearance and behavior of their web pages.

Mastering CSS3 Selectors focuses on the power of CSS3 selectors and how they can be intelligently leveraged to create powerful interactive sites. This video course explores CSS selectors in depth, demonstrating how to work with them on a granular level to confidently manipulate all the elements of a web page.

We'll start off the course with a quick refresher of the core CSS selectors available since CSS1 and become familiar with the Universal selector. We'll then move on to see how we can control the colors of actions and links in CSS and will get ourselves up-to-date with the changes that have taken place with them. Next we'll work with the new CSS2 and CSS3 attribute selectors and learn the basics of how to work with the lang attribute in HTML and the lang-CSS selector.

As we proceed, we'll master the usage of a wide array of selector techniques and tricks, including working with dynamic content around elements, manipulating inner content, understanding structural selectors, and more.

Taking an in-depth look at specific selectors within CSS3, by the end of the course you will have complete control over every element of a web page to make your site behave exactly the way you want it to.

About The Author

Ben Fhala discovered his passion for data visualization while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world.

He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Among Ben's publications are HTML5 Graphing and Data Visualization Cookbook, and five video courses: jQuery UI Development; Learning Object-Oriented JavaScript; Mastering JavaScript; JavaScript Design Patterns; Web Visualization with HTML5, CSS3, and JavaScript, all for Packt Publishing.

What are the requirements?

  • JavaScript/jQuery developers will also benefit from it. Even if you don't plan to become a CSS developer, knowing the rules for selectors will empower you to leverage selectors to create better, interactive sites.

What am I going to get from this course?

  • Develop the essential skills required to progress into professional CSS web designing
  • Leverage the power of selectors to target HTML elements based on any one of their attributes
  • Reduce the excess overhead on your web pages using combinator selectors
  • Manipulate the appearance of characters using inner content selectors
  • Control the styling of an item that is the focus of a hashtag link using the powerful target selector
  • Enhance the usability of your web pages by adding dynamic content on the fly with the help of structural selectors

Who is the target audience?

  • If you're new to the world of CSS, or want to catch up on the new techniques in CSS2 and CSS3, you have just found the perfect course for you.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction to CSS Selectors

This video will provide an overview of the course.


Let's start exploring the world of selectors with a quick overview of the basic selector types and the joker card/selector.


Let’s turn our attention to the actions related to pseudo classes. By the end of this video, you will know how to control the colors of actions and links in CSS and be up-to-date with the changes that have taken place in them.


We will now move on to the world of attributes, where we will stay in the next two videos. By the end of this video, you will know how to work with CSS2 Attribute Selectors.


In this video, we will explore the new CSS3 attribute selectors. By the end of this video, you will know how to work with the new CSS3 attribute selectors.

Section 2: Advanced CSS Selectors

You might speak only one language, but there are differences in the way users expect content to look like when they are from different countries. The language attribute enables you to create small custom rules that will apply to specific sublanguages at ease without you having to create separate pages for each sublanguage. By the end of this video, you will know the basics of how to work with the lang attribute in HTML and the lang-CSS selector.


So far, in our journey into the world of CSS3 selectors, we came across many selectors that help us find an item by explicitly trying to configure that item. In this video, we will have a reversal in the CSS selection logic by weeding out content based on what it's not.


Combinator selectors have been around since CSS2 and have been enhanced in CSS3. Through the usage of combinator selectors, we can drastically reduce the amount of classes that we use in an application. Combinator selectors enable us to define rules based on the relations of an item to its parent, the immediate adjacent item, or even a further removed preceding item. By the end of this video, you will know how to work with the Combinator selectors.


A really powerful group of selectors has been added into the CSS3 Selectors specs; this group can be clustered as UI selectors. In this video, we will take a look at jQuery and see how its selector engine works with a live example of a JavaScript code that we created, which switches the language dynamically based on user selection.

Section 3: Make Your Content Dynamic

In this video, you will know how to dynamically add anything to your HTML content before or after the element using the CSS2 content-adding selectors.


In this video, we will continue to explore two more selectors that enable us to select a part of the content in a page. Both the selectors were added in CSS1; they enable us to change the style of the first letter in an element or the entire line. By the end of this video, you will know how to work with the ::first-letter and ::first-line CSS1 selectors.


One of the coolest new selectors in CSS3 is the target selector. The target selector enables you to control the styling of an item that is the focus of a hashtag link. With the new CSS target selector, we can now help viewers by highlighting the selected area, making it much more easy to find them.

When it comes to creating smart and dynamic layouts, one of the more powerful features that was first introduced in CSS2 was the :first-child selector, which enabled us to do something with the first child in a group of elements. CSS3 takes that idea and pushes its further with more structural controls.

In this last video of the course, we will take a look at a few more structural selectors that we didn't cover yet, as we compare the differences between only-child and only-of-type.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course