Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add Mastering CSS3 Selectors to your Wishlist.

Add to Wishlist

Mastering CSS3 Selectors

Ace at CSS3 Selectors to tackle the most important aspect of web designing – the power of selection
4.2 (8 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.
85 students enrolled
Last updated 1/2016
$10 $95 89% off
5 days left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?

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.

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.
Students Who Viewed This Course Also Viewed
What Will I Learn?
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
View Curriculum
  • 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.
Curriculum For This Course
Expand All 14 Lectures Collapse All 14 Lectures 01:44:45
Introduction to CSS Selectors
5 Lectures 33:39

This video will provide an overview of the course.

The Course Overview

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

The Universal 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.

Linking and Action Selectors

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.

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.

CSS3 Attribute Selectors
Advanced CSS Selectors
4 Lectures 39:54

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.

Preview 11:49

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.

Working with the not CSS3 Selector

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.

Combining Logic with 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.

Playing with the CSS3 UI Selectors
Make Your Content Dynamic
5 Lectures 31:12

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.

Preview 04:28

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.

Manipulating Inner Content with Inner Content 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.

Focusing on a Target with CSS3

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.
Getting to Know the Structural Selectors

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.

Comparing Between only-child and only-of-type
About the Instructor
3.9 Average rating
3,593 Reviews
29,544 Students
311 Courses
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.

Report Abuse