Mastering CSS Selectors: A Beginner’s Guide

1)- The most common CSS selectors: How to Target Specific HTML Elements

CSS selectors are patterns used to select HTML elements that you want to style. The following are some of the most common CSS selectors:

a)- Element Selector

This selector targets HTML element tags. It is represented by the name of the HTML element itself. For example, If we have this HTML code:

HTML
<body>

    <p>Hello There this is a CSS course.</p>
    
</body>

the following code selects all <p> elements and sets their font size to 50 pixels:

CSS
p {
  
  font-size : 50px;

    }
CSS selector element

b)- Class Selector

This selector targets HTML elements that have a specific class attribute. It is represented by a period (.) followed by the name of the class. For example, if we have the following HTML code:

HTML
<body>

    <p class="first">Hello There this is a CSS course.</p>

    <div> Different CSS selector types.</div>

    <span class="first">Hope this course is informative.</span>
    
</body>

the following code selects all elements with the class “first” and sets their background color to green:

CSS
.first {
            
            background-color : green;
        }
CSS class selector

c)- ID Selector

This selector targets a specific HTML element that has a unique ID attribute. It is represented by a hash (#) followed by the name of the ID. For example, if we have the following HTML code:

HTML
<body>

    <p>Hello There this is a CSS course.</p>

    <div id="htmltag"> Different CSS selector types.</div>

    <span>Hope this course is informative.</span>

</body>

the following code selects the element with the ID “htmltag” and sets its background color to blue:

CSS
#htmltag{
            
            background-color : aqua;
            
        }
ID CSS selector

d)- Descendant Selector

This selector targets HTML elements that are descendants of another element. It is represented by a space between two selectors. For example, if we have the following HTML code:

HTML
<body>

        <div>

                <p>Hi there! How are you?</p>
        
                <span>This is a CSS course</span>
        
        </div>
        
</body>

the following code selects all <span> elements that are descendants of a <div> element and sets their border width to 2px and the color of the border to blue:

CSS
div span{

            border : 2px solid blue;
            
        }
Descendant CSS Selector

e)- Child Selector

This selector targets HTML elements that are direct children of another HTML element. It is represented by a > symbol between two selectors. For example, if we have the following HTML code:

HTML
<body>

    <ul>
    
        <li>First item</li>
        
        <li>Second item</li>
        
        <li>Third item</li>
        
    </ul>

</body>

the following code selects all <li> elements that are direct children of a <ul> element and sets their color to red:

CSS
ul>li{

            color : red;
            
        }
CSS Child Selector

f)- Adjacent Sibling Selector

This selector targets an HTML element that immediately follows another element. It is represented by a + symbol between two selectors. For example, if we have the following HTML code:

HTML
<body>

    <h1>CSS tutorial</h1>
    
    <p>Welcome to this course!</p>
    
    <p>This tutorial is about selectors</p>

</body>

the following code selects the <p> element that immediately follows the <h1> element and sets its color to pink:

CSS
h1 + p{

            color : pink;
            
        }
Adjacent Sibling Selector

g)- General Sibling Selector

This selector targets elements that follow another element. It is represented by a ~ symbol between two selectors. For example, if we have the following HTML code:

HTML
<body>

    <h1>CSS tutorial</h1>

    <p>Welcome to this course!</p>

    <p>This tutorial is about selectors.</p>

    <p>Hope you're enjoying it!</p>

    <span>Thanks.</span>

    <h2>Don't forget to leave a comment!</h2>

</body>

the following code selects all <p> elements that follow the <h1> element and sets their color to blueviolet:

CSS
h1 ~ p{

            color : blueviolet;
            
        }
General Sibling Selector

2)- What is the difference between Descendant Selector and Child Selector?

The difference between a descendant element and a child element in CSS is based on the depth of their relationship to the parent element.

A descendant element is any element that is nested inside another element, regardless of how deep it is in the hierarchy. For example, in the following HTML structure, the <span> element is a descendant of the <div> element:

HTML
<div>

      <p>Some text</p>
      
          <ul>
          
                <li><span>Item 1</span></li>
                
                <li><span>Item 2</span></li>
                
        </ul>
        
</div>

So if we want to select the <span> element, we can do it using the descendant selector, which is represented by a space between two selectors.

CSS
div span{

            font-style: italic;
            
        }
CSS descendant Selector

If we want to use the child selector to select the <span> element it will not work, because the <span> element is not a direct child of the <div> element.

To use the child selector, the child element has to be directly nested inside another HTML element.

For example, in the same HTML structure as before, the <li> elements are child elements of the <ul> element:

So to select the <li> elements using child selectors we’ll use the following CSS code:

CSS
ul>li{

            font-style : italic;
            
        }

So, the main difference between descendant and child selectors is that descendant selectors match all elements that are descendants of the parent, while child selectors only match elements that are direct children of the parent.

3)- Conclusion

In summary, CSS selectors are powerful tools that allow you to target specific HTML elements and apply styling rules to them. By understanding and using the most common CSS selectors, you can create stylish and visually appealing web pages.

Read More

Difference between absolute and relative positions

How to add borders in CSS?

How to add CSS animations?

inline vs block vs inline-block

Leave a Reply

%d bloggers like this: