Mastering CSS 3.0 Selectors
4.0 (80 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.
4,301 students enrolled
Wishlisted Wishlist

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

Add to Wishlist

Mastering CSS 3.0 Selectors

Empowering your development and design through CSS 3.0 Selectors
4.0 (80 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.
4,301 students enrolled
Last updated 2/2017
English
Price: Free
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Master all the common ways to work with CSS Selectors
  • Know how to work with the new Selector types.
View Curriculum
Requirements
  • You should be swimming with HTML.
  • Have some background working with CSS. (CSS3 experience not mandatory)
  • Love creating smart things that look amazing.
Description

The ultimate CSS3 Selectors guide. If you’re new to the world of CSS, or want to catch up on the new techniques in CSS2 and CSS3 you just found the perfect course for you. JavaScript/jQuery developers think you will get out of it that easy? Even if you don’t plan to become a CSS developer, knowing the rules of selectors will bump up your capabilities and leverage selectors to create better interactive sites. Become amazing at what you do by knowing the most important aspect of web development and design – the power of selection. By the end of this course you will be a master CSS3 Selector. 

The most important things you will gain by the end of the video course:

  • You will know all the ways to work with selectors making your web design easier and more powerful.
  • Lay down the most important foundation skills to become an interactive developer(such as using jQuery or other selector technologies).
  • Be up to speed with the most cutting edge ways to build websites.


Who is the target audience?
  • Web designers
  • Web Developers
  • People who don't want to be left behind (skills upgraders).
Students Who Viewed This Course Also Viewed
Curriculum For This Course
13 Lectures
01:49:25
+
Starting from the Basic Selectors
4 Lectures 33:30

Let's start exploring the world of selectors with a quick overview of the basic selector types and the joker card/selector. This is just a brief overview: for in-depth learning of how CSS rules work please visit our Absolute CSS course. By the end of this lesson you will have a refresher of the core CSS selectors available since CSS1 and will be introduced to the Universal selector.


Properties: universal selector, type selector, ID selector, class selecto

The Universal Selector
05:33

In the last lecture we saw the core CSS selectors (id, class and element) as we wrapped up the chapter with the modern new joker selector (the universal selector). In this lecture we turn out attention to action and actionable related pseudo classes. By the end of this lecture, you will know how to control the colors of actions and links in CSS and will be up-to-date with the changes that have taken place with them.

properties: link pseudo class(CSS1), user action pseudo classes(CSS2), :link, :visited, :active, :hover, :focus

Linking and Action Selectors
06:09

In the last lecture we discovered how to control the colors of actions and links in CSS we are now moving into the world of attributes where we will stay in the next two lectures. In this lecture we will cover the new CSS2 attribute selectors and how to work with them while in the next lecture we will cover the CSS3 ones. By the end of this lecture, you will know how to work with CSS2 Attribute Selectors.


properties: CSS2 Attribute Selectors, =, ~=,|=, E[prop

CSS2 Attribute Selectors
14:36

In the last lecture we learnt how to work with attribute selectors, they’ve been around since CSS2. A few new powerful features have been added into CSS rules with the birth of CSS3 Selectors. In this lecture we will explore the new CSS3 attribute Selectors. By the end of this lesson, you will know how to work with the new CSS3 Attribute Selectors.

properties: CSS3 Attribute Selectors, ^=, $=, *=

CSS3 Attribute Selectors
07:12
+
Taking it one step further
4 Lectures 42:21

You might speak only one language, but yet there are differences in the way users expect content to look like when they are of different countries. The language attribute enables you to create small custom rules that would apply to specific sub-languages at ease without needing to create separate pages for each sub language (such as American English vs. British English). By the end of this lesson, you will know the basics of how to work with the lang attribute in HTML and the lang-CSS selector.


properties: CSS2 language pseudo-class rules, lang-CSS

Localizing your site with language selectors
12:08

So far in our journey into the world of CSS3 selectors we met many selectors that help us find an item by explicitly trying to configure that item. In this lecture, we take a reversal in our CSS selection logic by weeding out content based on what it's not. (Warning: We will solve the homework from the last lesson so if you haven't completed it yet please don't press play and first post your answer into the comment section). By the end of this lecture, you will know how to work with CSS3 not () selector and know the rules that govern it.

Properties: not, css negation selectors, css3

Working with the Not CSS3 Selector
08:20

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 we use in our application. Combinator selectors enable us to define rules based on the relations of an item to its parent, immediate adjacent item or even a further removed preceding item. By the end of this lecture, you will know how to work with the Combinator selectors.

Properties:  Combinator selectors, Child selector, adjacent selector, preceding CSS3 selector, CSS2

Combining logic with combinator selectors
08:09

A really powerful group of selectors has been added into CSS3 Selectors specs, this group can be clustered as UI selectors. UI selectors enable us to create rules that apply to elements that are enabled, disabled and even checked. In this lecture we will take our first look into jQuery and see how its selector engine works with a live example of a JavaScript code I've created that switches the language dynamically based on user selection. By the end of this lesson, you will know all the new CSS3 UI Selectors and how to work with them both via CSS and via JavaScript using jQuery.


Properties: jquery, css3 ui selectors, disabled, enabled, checked

Playing with the CSS3 UI selectors
13:44
+
Dynamic Selectors
5 Lectures 33:34

It's time for us to meet a new type of selector. If you took our Absolute CSS course you already have met these selectors the: before a::after selectors. These selectors enable us to inject content before or after an element using the content property. By the end of this lesson, you will know how to add dynamically to your HTML content before or after the element using CSS2 content adding selectors.


Properties: ::before, ::after, selector, css3, conten

Adding dynamic Content before or after an element
05:53

In the last lecture we were introduced for the first time to selectors that enable us to change content or talk to an area within our content. In this lecture we continue and explore two more selectors that enable us to select part of the content in our page. Both selectors were added into CSS1 and enable us to change the style of the first letter in an element or the full line. By the end of this lesson, you will know how to work with the::first-letter and ::first-line CSS1 selectors.

Properties: css1, ::first-letter, ::first-line, selector

Manipulating inner content with inner content selectors
05:11

One of the coolest new selectors to 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. HTML links can have a #name applied at the end of them. These anchor names help the browser jump to areas of a page based on anchors. With the new CSS target selector we can now help viewers by highlighting the selected area making it a much easier find for them. By the end of this lecture you will know how to work with the new: target selector in CSS3.

Properties: :target, css3 selector

Focusing on a target with CSS3
04:41

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 that 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 lecture we will explore the CSS2 structural selectors and explore the group of nth selectors in CSS3. 

Properties: first-child, last-child, nth-child, nth-last-child, nth-of-type, nth-last-of-type, css3 selectors, css2 structural selectors.

Getting to know the structural selectors
11:50

In the last lecture we explored the CSS2 structural selectors and explored the group of nth selectors in CSS3. In this last lecture of the chapter we will look at a few more structural selectors that we didn't cover yet as we compare between the differences between only-child and only-of-type.

Properties: only-child, only-of-type, css3 structural selectors, root, empty, last-of-type, first-of-type

Comparing between only-child and only-of-type
05:59
About the Instructor
Everything Nice inc
3.9 Average rating
104 Reviews
5,435 Students
2 Courses
Technology Directors

With over 15 years of experiences creating online courses we aim to find the niche topics to help you become a great developer. The development strategy behind our courses is to not go in the path of the formulated old school teaching that has intimidated designers and new to development students but instead we aim to speak in common tongue in an aim to simplify concepts (and avoid complex terminologies ) to make learning interactive design accessible to everyone.