CSS Selectors Tutorial

 CSS Selectors

To Apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this module.

CSS Selectors are used to "find" (or select) the HTML elements you want to style.

We can divide selectors into five categories.

• Simple Selectors
• Combination-Selectors
• Pseudo-Class Selectors
• Pseudo-Element Selectors
• Attribute Selectors

CSS selectors allow you to select and style HTML elements selectors are used to find elements based on their ID, classes, types, attributes, values of attributes and much more.

 

let’s go through the most common selectors the element selector selects elements based on the element name, this is the CSS selector it is set to P(Selector) means it will select all P elements on the page like this so it Styles all P elements to be centre-aligned and have a red colour well if we add another element that is not a P element it will not be affected by the style see this div element was not affected by the style the ID selector uses the ID attribute of an HTML element.

SNAP1

SNAP2

To find the specific element an ID should be unique within a page so you should use the ID selector when you want to find a single unique element. Define an element with a specific ID use a hash character followed by the ID of the element so this style rule will be applied to the HTML element with ID equals power 1.

 

If we add an ID to the second element and change the selector to match new ID the other element will be affected by the style like this.

 

                              

SNAP3

 

The class selector finds element with a specific class set by the HTML class attribute. To select elements with a specific class use a period character followed by the name of the class so this style will be applied to HTML elements with class equals centre or you can specify the only specific HTML elements should be affected by a class by including the element name, so we set P parent centre only P elements with class equals Centre will be affected like this.

 

                               

SNAP4

 

You can also add multiple classes to an element so if we create a separate style row for color see now, we have a style rule for center and a style group for color and remove the element selector and add a second class to the h1 element. See both elements are affected by the center style rule but only the h1 is affected by the color style rule since it has class equal center and color in stylesheets.

 

                           

SNAP5

 

There are often elements using the same style for example here we have the same style for the h1, h2 and P element to minimize the code you can group selectors to group selectors separate each selector with a comma.

 

                           

SNAP6

 

Here we have grouped selectors for h1, h2 and P elements so the style is applied to h1 h2 and P elements this works with all kinds of selectors so if we removed the h2 and P element selectors and add an ID to the P element so we can group selectors for h1 and elements with IP para 1 so this works with any kind of selector element selectors ID selectors class selector or any other selector this concludes our tutorial for CSS selectors.

 

               

SNAP7

         

 

Thank you for reading.