# 7 Advanced CSS Selectors You Should Know

CSS is indispensable when we talk about web design and development. Basic selectors like `classes (.)` and `IDs (#)` might be familiar, but some advanced selectors can make your code efficient and elegant. Let’s explore 7 of these lesser-known yet incredibly powerful selectors.

## 1\. Child Selector (>)

`parent > child`

This selector targets direct child elements of a specified parent, ignoring deeper nested elements.

```javascript
ul > li { 
    color: blue; 
}
```

This will style only the direct li children of `ul`, leaving nested li elements unaffected. Perfect for when you need precision and want to ensure styles don’t unintentionally cascade to nested elements. All modern browsers and as far back as IE7 support this feature.

## 2\. Adjacent Sibling Selector (+)

`element1 + element2`

If you’ve ever needed to target an element immediately following another, the `Adjacent Sibling Selector (+)` is your go-to.

```javascript
h2 + p {
    margin-top: 10px;
}
```

This provides a 10px top margin to any paragraph immediately following an `h2`. Especially handy for managing spacing after specific elements.

## 3\. Attribute Selector (\[attr=value\])

`element[attr=value]`

Matches elements based on their attribute and their value.

```javascript
input[type="text"] {
    border: 1px solid gray;
}
```

Styles all input fields of type text with a gray border. This is useful for styling specific form elements or elements with unique data attributes.

%[https://twitter.com/mainulspace/status/1701520743152898254?s=20] 

## 4\. Pseudo-classes (:pseudo-class)

`element:pseudo-class`

This selector focuses on elements by their state, position, or other unique traits rather than their structure.

```javascript
a:hover {
    color: red;
}
```

Changes link color to red when hovered over. Enhance interactivity (like hover and focus states) and select elements based on position (like `:first-child`).

## 5\. Not Selector (:not())

`element:not(selector)`

The `Not Selector :not()` excludes specific elements from being styled.

```javascript
p:not(.special) {
    font-weight: normal;
}
```

Styles all paragraphs without the class “special” to have a normal font-weight. This allows you to apply broad styles while exempting particular cases.

## 6\. Universal Selector (\*)

`*`

The Universal Selector `*` is a wildcard that matches every element on a webpage.

```javascript
* {
    box-sizing: border-box;
}
```

Assigns the box-sizing property to all elements, making layout calculations more intuitive. Useful for global styles or CSS resets.

## 7\. Grouping Selector (,)

`selector1, selector2, …`

Last but not least, the Grouping Selector lets you apply the same styles to multiple elements.

```javascript
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}
```

Sets a consistent font across the three header levels. A time-saving approach when various elements share a set of styles.

## Conclusion

CSS offers an incredible depth and flexibility that becomes more apparent as you explore its advanced selectors. You might not often use these selectors, but if you know how to use them, you can simplify your code and improve your style.

🖥️ Before you head back to your coding zone, consider these quick actions:

❤️ Show some love to this article  
💬 Curious or have insights? Drop your thoughts in the comments  
🔄 Spread the word among our developer community

Your feedback is invaluable. It empowers me to craft even better tech content.

🌟 Thank you for being such a fantastic supporter! Every like, comment, and share enriches our tech discourse.

Feel free to connect with me on [**Twitter**](https://twitter.com/mainulspace) or [**LinkedIn**](https://www.linkedin.com/in/mainulspace/).

## Read Next...

%[https://mainulspace.hashnode.dev/10-underutilized-css-properties-every-developer-should-know] 

%[https://mainulspace.hashnode.dev/10-lesser-known-javascript-array-methods-you-mightve-missed] 

%[https://mainulspace.hashnode.dev/design-patterns]