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:
<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:
p {
font-size : 50px;
}
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:
<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:
.first {
background-color : green;
}
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:
<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:
#htmltag{
background-color : aqua;
}
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:
<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:
div span{
border : 2px solid blue;
}
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:
<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:
ul>li{
color : red;
}
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:
<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:
h1 + p{
color : pink;
}
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:
<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:
h1 ~ p{
color : blueviolet;
}
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:
<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.
div span{
font-style: italic;
}
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:
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.