Hello Dear Readers, Today In this Post, You will learn CSS Basic Selectors | CSS Course For Beginners To Advanced 2021. Earlier I have shared CSS Color & Background Color | CSS Course For Beginners To Advanced 2021. and now it’s time to CSS Basic Selectors | CSS Course For Beginners To Advanced 2021.
You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.
In earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as h1, or a class such as .special.
In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the Level 3 Selectors specification, which is a mature specification, therefore you will find excellent browser support for these selectors.
Let the CSS Begin
Now, create a new blank text document and save it in our “CSS-Selectors” folder with the file name of style.css. We are now ready to start styling our page with the four essential Selector types.
Type Selectors are very simple. They correspond with any HTML element type. For example, add the following code to your blank CSS file; these are three simple Type Selectors:
body { |
2 | font-family: Arial, sans-serif; |
3 | font-size: small; |
4 | } |
5 |
6 | h1 { |
7 | color: green; |
8 | } |
9 |
10 | em { |
11 | color: red; |
12 | } |
ID Selectors
If you take a look at the code of our HTML page, you’ll notice we have a
element with an ID of intro. We assign elements IDs when they are unique on a page; there is only one “intro” section on our page. This is important, because two elements cannot have the same ID.
When an element has an “ID” we can access it with a CSS selector by placing a pound sign (#) in front of it’s ID value. Add the following code to your CSS file, directly below our
Class Selectors
Class Selectors are very similar to ID Selectors. The major difference is that while a certain ID should only be assigned to one element, we can assign the same class to as many elements as we want.
If you look at the code of our HTML page, you’ll notice that two of our paragraph tags have a class of “important.” When an element has a class we can access it with a CSS selector by placing a period in front of it’s class name.
Descendant Selectors
Imagine we wanted the important paragraph in the “intro” Div to look different than the important paragraph at the bottom of the page. We can use a Descendant Selector to achieve this.
Let’s dissect how the selector is working. It begins with “#intro” which selects our Intro Div. This is followed by a space, and then “.important.” So essentially our selector is telling the web browser to (1) find the element with the ID of intro, (2) go inside that element and find any elements with the class of important.
That’s it for today’s lesson. Let’s recap:
- Type Selectors correspond with HTML elements
- ID Selectors are used by adding # in front of an elements ID
- Class Selectors are used by adding a period in front of an elements class
- Descendant Selectors are similar to family trees; you start with the parent element you wish to select, add a space, and continue naming any interior elements until you’re arrived at the specific element you wish to select
Pretty! This was a really wonderful post. Thank you for your provided information.
Saved as a favorite, I really like your blog!
Yesterday, while I was at work, my sister stole my iPad and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My iPad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share it with someone!