Take this
course

Software Development / Web Development

Mastering CSS3 Selectors

Ace at CSS3 Selectors to tackle the most important aspect of web designing – the power of selection

Description

About This Video

  • Make your web designs stand out by learning the most important aspects of CSS Selectors right from CSS1 to CSS3
  • Get to know all the new CSS3 selectors and work with them using jQuery, both via CSS and JavaScript
  • Discover hacks and tricks with CSS3 selectors to create powerful, interactive websites


In Detail

If HTML is the skeleton of a web page, CSS is its flesh. To create amazing websites, web developers need to master CSS Selectors, which are the most critical things in the modern Web and form the backbone of CSS designs. Third-party tools such as jQuery are popular mainly because they allow you to select elements with ease using CSS selectors. Selectors in CSS allow designers to access HTML elements to enhance and manipulate the appearance and behavior of their web pages.


Mastering CSS3 Selectors focuses on the power of CSS3 selectors and how they can be intelligently leveraged to create powerful interactive sites. This video course explores CSS selectors in depth, demonstrating how to work with them on a granular level to confidently manipulate all the elements of a web page.


We'll start off the course with a quick refresher of the core CSS selectors available since CSS1 and become familiar with the Universal selector. We'll then move on to see how we can control the colors of actions and links in CSS and will get ourselves up-to-date with the changes that have taken place with them. Next we'll work with the new CSS2 and CSS3 attribute selectors and learn the basics of how to work with the lang attribute in HTML and the lang-CSS selector.


As we proceed, we'll master the usage of a wide array of selector techniques and tricks, including working with dynamic content around elements, manipulating inner content, understanding structural selectors, and more.


Taking an in-depth look at specific selectors within CSS3, by the end of the course you will have complete control over every element of a web page to make your site behave exactly the way you want it to.

Full details

Curriculum

  • Introduction to CSS Selectors
    The Course Overview
    This video will provide an overview of the course.
    1:26
    The Universal Selector
    Let's start exploring the world of selectors with a quick overview of the basic selector types and the joker card/selector. • Get a quick overview of the basic selector types in CSS • Get introduced to the universal selector and understand its importance • Watch the universal selector in action
    4:59
    Linking and Action Selectors
    Let’s turn our attention to the actions related to pseudo classes. By the end of this video, you will know how to control the colors of actions and links in CSS and be up-to-date with the changes that have taken place in them. • Take a quick look at link selectors • Group selectors from CSS1 and CSS2 that are related to link selectors • Learn all the actions related to link selectors in CSS
    6:09
    CSS2 Attribute Selectors
    We will now move on to the world of attributes, where we will stay in the next two videos. By the end of this video, you will know how to work with CSS2 Attribute Selectors. • Take a look at the attribute selectors in CSS2 • Check out the most important attribute selectors • Understand the usage of these attribute selectors
    14:09
    CSS3 Attribute Selectors
    In this video, we will explore the new CSS3 attribute selectors. By the end of this video, you will know how to work with the new CSS3 attribute selectors. • Take a deeper look at the attributes in CSS3 • Watch the CSS3 attribute selectors in action
    7:01
  • Advanced CSS Selectors
    Localizing Your Site with Language Selectors
    You might speak only one language, but there are differences in the way users expect content to look like when they are from different countries. The language attribute enables you to create small custom rules that will apply to specific sublanguages at ease without you having to create separate pages for each sublanguage. By the end of this video, you will know the basics of how to work with the lang attribute in HTML and the lang-CSS selector. • Work with different language selectors • Understand the rules that govern language selectors in CSS2 • Watch these language selectors in action on our site
    11:50
    Working with the not CSS3 Selector
    So far, in our journey into the world of CSS3 selectors, we came across many selectors that help us find an item by explicitly trying to configure that item. In this video, we will have a reversal in the CSS selection logic by weeding out content based on what it's not. • Learn about the Not CSS3 selector • Use negation rules with the language selectors that we saw earlier • Customize your sites to suit your needs using negation
    7:31
    Combining Logic with Combinator Selectors
    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 that we use in an application. Combinator selectors enable us to define rules based on the relations of an item to its parent, the immediate adjacent item, or even a further removed preceding item. By the end of this video, you will know how to work with the Combinator selectors. • Take a look at a child selector • Study the function of an adjacent selector • Watch the descendant selector come into play
    7:34
    Playing with the CSS3 UI Selectors
    A really powerful group of selectors has been added into the CSS3 Selectors specs; this group can be clustered as UI selectors. In this video, we will take a look at jQuery and see how its selector engine works with a live example of a JavaScript code that we created, which switches the language dynamically based on user selection. • Add radio buttons to the page • Play around with the appearance of the radio buttons • Get to know all the new CSS3 UI selectors and how to work with them both via CSS and via JavaScript using jQuery
    13:03
  • Make Your Content Dynamic
    Adding Dynamic Content Before or after an Element
    In this video, you will know how to dynamically add anything to your HTML content before or after the element using the CSS2 content-adding selectors. • Inject content into the HTML page • Add content before and after the elements using CSS3 selectors
    4:29
    Manipulating Inner Content with Inner Content Selectors
    In this video, we will continue to explore two more selectors that enable us to select a part of the content in a page. Both the selectors were added in CSS1; they enable us to change the style of the first letter in an element or the entire line. By the end of this video, you will know how to work with the ::first-letter and ::first-line CSS1 selectors. • Modify the existing content using CSS1 selectors • Manipulate the layout of the first line in a paragraph • Manipulate the layout of the first character in a paragraph
    4:59
    Focusing on a Target with CSS3
    One of the coolest new selectors in 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. With the new CSS target selector, we can now help viewers by highlighting the selected area, making it much more easy to find them. • Talk to a specific target that is highlighted • Control the styling of an item that is the focus of a hashtag link
    4:30
    Getting to Know the Structural Selectors
    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, which 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. • Check out the structural selectors in CSS2 • Work with the structural selectors in CSS3 • View the changes in the layout of the elements with the help of these selectors
    11:24
    Comparing Between only-child and only-of-type
    In this last video of the course, we will take a look at a few more structural selectors that we didn't cover yet, as we compare the differences between only-child and only-of-type. • Discuss the final few remaining selectors • Take a look at the similarities and differences of these selectors with the ones already discussed • Go through some final words
    5:55

Skills

  • Cascading Style Sheets (CSS)

Similar Courses

More Courses by this Instructor