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.

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!