4.7 out of 5
4.7
5 reviews on Udemy

All CSS3 Selectors for your HTML

CSS Selectors is a backbone skill for every web-developer. Master CSS Selectors today!
Instructor:
Iaroslav Karandashev
1,727 students enrolled
English [Auto-generated]
Build simple and complex CSS Selectors
Calculate specificity of CSS Selectors
Utilize pseudo-classes and pseudo elements

After this course, you will be able to build simple and complex CSS3 Selectors. This skill will allow you to reduce the amount of HTML and CSS on your project by 25% or more.

CSS Selectors are especially useful for Web Developers who work with legacy projects and needs to make changes in style-sheets that can affect the whole application and its functionality.

I’ve asked my colleagues and 10 of 10 software engineers know CSS3 Selectors on an expert level.

Test automation engineers will also benefit from this course. When you are writing integration tests – your goal is to find elements in DOM tree and interact with them or verify their appearance. It is hard to convince engineers to apply some changes just because you need them for tests. With complex CSS Selectors, you can find any element in your web-page.

I welcome you to my course and hope you will add CSS Selectors to your skill set. There are many quizzes and coding exercises so you will have a lot of practice.

Introduction

1
Introduction

In this course we will talk about CSS3 selectors. Everyone knows the simple class selector. But if you would like to be a pro - it is important to know other selectors, combinators and understand how they work.

2
Overview

In this lecture we will have overview of this course and CSS Selectors.

3
Overview quiz
4
Start Learning CSS Selectors

Basic CSS Selectors

1
Type Selectors

The type selector finds elements by their element name within a document.

2
Type Selectors
3
Little crocodile wants to become a big one
4
Universal Selector

The universal selector finds elements of any type.

5
Universal Selector

This quiz will check you knowledge of Universal Selector.

6
Hungry crocodile would like to eat 3 fishes
7
Id Selector

ID selector finds single element based on value of its id attribute.

8
Id Selectors

This quiz will show how you've learned ID selectors

9
Help a crocodile to eat a big fish
10
Attribute Selector

The attribute selector finds elements based on presence or a value of an attribute.

11
Attribute Selectors

Show how you've learned Attribute selectors

12
Valuable Fishes for a Crocodile
13
Find 2 golden fishes
14
Find baskets with Carp
15
Find all carps
16
Crocodile Express
17
Class Selector

The class selector matches elements based on the value of their class attribute.

18
Class Selectors

Check your knowledge of class selectors

19
Help crocodile to make a superfish

Pseudo Classes and Elements

1
Pseudo Classes

A pseudo-class is a keyword added to a selector and it targets elements under specific conditions.

2
Pseudo Classes

Check what you've learned about pseudo classes.

3
Dynamic Pseudo Classes

Dynamic pseudo classes used to apply styles to elements in some state.

4
Dynamic Pseudo Classes

Check you knowledge of dynamic pseudo classes

5
Pseudo Classes for UI states

Use pseudo classes to style buttons, inputs, checkboxes etc under some conditions.

6
Pseudo classes for UI states

Check your knowledge of pseudo classes for UI states

7
Help a crocodile to find disabled fish traps
8
Structural Pseudo Classes

In this lecture you will learn how to target elements based on their position in HTML document.

9
Pseudo Elements

A CSS pseudo-elements can be used to style parts of an element. It can be used to style the first letter or first line, of a text.

Generated content can be added using before and after.

Combinators and Specificity

1
Combinators

Selector can consists of one or more simple selector. We can use a combinators to build complex selectors.

2
Specificity

Understanding which selectors overrule other selectors can be confusing. Throughout a site, overriding styles tends to be common, so understanding specificity and weight is important.

3
Summary

Summary of the course and what we have learned.

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 out of 5
5 Ratings

Detailed Rating

Stars 5
3
Stars 4
2
Stars 3
0
Stars 2
0
Stars 1
0
478888efb361ab770af886b6b9aa60b8
30-Day Money-Back Guarantee

Includes

1 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion
Demos
Support Buy $0