Introduction:
CSS selectors are a powerful tool for targeting specific elements in HTML and applying styles to them. While basic selectors like class and ID selectors are widely used, CSS offers a wide range of advanced selector techniques that allow for more precise and flexible styling. In this blog post, we will delve into the world of advanced CSS selectors, exploring various techniques and providing practical examples to demonstrate their capabilities. Let’s unlock the power of CSS selectors!
If you want to learn about the Flexbox CSS, you can refer here.
1. Descendant Selector
The descendant selector allows you to target elements that are descendants of another element. It is denoted by a space between selectors. For example:
.container p {
/* Styles applied to <p> elements within .container */
}2. Direct Child Selector
The direct child selector targets elements that are direct children of another element. It is denoted by the “>” symbol. Here’s an example:
.container > div {
/* Styles applied to <div> elements that are direct children of .container */
}3. Adjacent Sibling Selector
The adjacent sibling selector selects an element that comes immediately after another element. It is denoted by the “+” symbol. Here’s an example:
h2 + p {
/* Styles applied to <p> elements that come immediately after <h2> */
}4. General Sibling Selector
The general sibling selector selects elements that are siblings of another element, regardless of their position. It is denoted by the “~” symbol. Here’s an example:
h2 ~ p {
/* Styles applied to <p> elements that are siblings of <h2> */
}5. Attribute Selector
Attribute selectors allow you to target elements based on their attributes. You can select elements with specific attribute values, attribute values starting with or containing a specific string, and more. Here are some examples:
/* Select elements with a specific attribute value */
input[type="text"] {
/* Styles applied to <input> elements with type="text" */
}
/* Select elements with an attribute starting with a specific string */
a[href^="https://"] {
/* Styles applied to <a> elements with href starting with "https://" */
}
/* Select elements with an attribute containing a specific string */
img[src*="logo"] {
/* Styles applied to <img> elements with src containing "logo" */
}6. :hover and :focus Pseudo-classes
The :hover and :focus pseudo-classes allow you to apply styles to elements when they are hovered over or in focus, respectively. For example:
.button:hover {
/* Styles applied when the button is hovered over */
}
.input-field:focus {
/* Styles applied when the input field is in focus */
}7. :not() Pseudo-class
The :not() pseudo-class allows you to select elements that do not match a specific selector. It is useful for excluding certain elements from styling. Here’s an example:
ul li:not(.special) {
/* Styles applied to <li> elements that do not have the class "special" */
}8. :nth-child() Pseudo-class
The :nth-child() pseudo-class selects elements based on their position within their parent. It allows you to target specific child elements, such as odd or even elements, or elements at specific positions. Here’s an example:
ul li:nth-child(odd) {
/* Styles applied to odd-numbered <li> elements within <ul> */
}
ul li:nth-child(3n) {
/* Styles applied to every third <li> element within <ul> */
}Conclusion:
CSS selectors are a powerful tool that enables precise and targeted styling of HTML elements. By mastering advanced selector techniques such as descendant selectors, direct child selectors, attribute selectors, pseudo-classes, and more, you can greatly enhance your CSS styling capabilities. Understanding and utilizing these advanced selector techniques will help you write more efficient, maintainable, and flexible CSS code. Incorporate these techniques into your projects and unlock the true power of CSS selectors.
Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.
