Mastering CSS 3.0 Selectors

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

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

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

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

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

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

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

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.

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