All CSS3 Selectors for your HTML
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.
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.
In this lecture we will have overview of this course and CSS Selectors.
Basic CSS Selectors
The type selector finds elements by their element name within a document.
The universal selector finds elements of any type.
This quiz will check you knowledge of Universal Selector.
ID selector finds single element based on value of its id attribute.
This quiz will show how you've learned ID selectors
The attribute selector finds elements based on presence or a value of an attribute.
Show how you've learned Attribute selectors
The class selector matches elements based on the value of their class attribute.
Check your knowledge of class selectors
Pseudo Classes and Elements
A pseudo-class is a keyword added to a selector and it targets elements under specific conditions.
Check what you've learned about pseudo classes.
Dynamic pseudo classes used to apply styles to elements in some state.
Check you knowledge of dynamic pseudo classes
Use pseudo classes to style buttons, inputs, checkboxes etc under some conditions.
Check your knowledge of pseudo classes for UI states
In this lecture you will learn how to target elements based on their position in HTML document.
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
Selector can consists of one or more simple selector. We can use a combinators to build complex selectors.
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.
Summary of the course and what we have learned.