CSS selectors

CSS selectors are patterns or rules used to target HTML elements for styling. They identify elements based on attributes like type, class, ID, hierarchy, or state and apply styles defined in CSS rules.

Types of CSS Selectors

CSS provides a variety of selectors to cater to different needs, ranging from basic to advanced use cases.

1. Universal Selector (*)

The universal selector targets all elements on a webpage

* {
  margin: 0;
  padding: 0;
}

This resets all margins and padding across the site.

2. Type Selector (Element Selector)

Targets elements by their HTML tag name.

h1 {
  font-size: 24px;
}

This applies a font size to all <h1> elements.

3. Class Selector (.classname)

Targets elements with a specific class attribute. Classes are reusable and can apply to multiple elements.

.button {
  background-color: green;
  color: white;
}

// Usage in HTML
<div class="button">Click Me</div>

4. ID Selector (#id)

Targets a single element with a unique id attribute. IDs must be unique within a page.

#header {
  background-color: blue;
}

// Usage in HTML
<div id="header">Welcome</div>

5. Group Selector (selector1, selector2)

Applies the same styles to multiple elements by grouping them.

h1, h2, p {
  color: black;
}

This rule applies the same text color to <h1>, <h2>, and <p> elements.

6. Descendant Selector (ancestor descendant)

Selects elements nested within a parent element.

div p {
  color: red;
}

This targets <p> elements inside <div> tags.

7. Child Selector (parent > child)

Targets direct children of a parent element.

ul > li {
  list-style-type: none;
}

This applies styles only to immediate <li> children of a <ul>.

8. Sibling Selectors

• Adjacent Sibling Selector (element1 + element2): Targets the next sibling.
• General Sibling Selector (element1 ~ element2): Targets all subsequent siblings.

h1 + p {
  color: green;
}
h1 ~ p {
  font-style: italic;
}

9. Attribute Selectors

Target elements based on their attributes or attribute values.

/* Targets elements with a 'data-type' attribute */
[data-type] {
  border: 1px solid black;
}

/* Targets elements with an exact attribute value */
input[type="text"] {
  background-color: lightgray;
}

/* Targets elements where the attribute starts with 'pre' */
a[href^="https://pre"] {
  color: blue;
}

/* Targets elements where the attribute ends with '.jpg' */
img[src$=".jpg"] {
  border-radius: 10px;
}

10. Pseudo-Classes

Pseudo-classes define the state or condition of an element.

/* Hover state */
a:hover {
  text-decoration: underline;
}

/* First child */
ul li:first-child {
  font-weight: bold;
}

/* Even and odd children */
tr:nth-child(even) {
  background-color: lightgray;
}

11. Pseudo-Elements

Pseudo-elements style specific parts of an element, such as the first letter or line.

/* First letter styling */
p::first-letter {
  font-size: 2em;
  color: red;
}

/* After content insertion */
a::after {
  content: " →";
}

Advanced CSS Selectors

1. :not() Selector

Excludes elements that match a specified pattern.

input:not([type="submit"]) {
  border: 1px solid gray;
}

2. :is() and :where() Selectors

Simplify complex selectors:

• :is() calculates specificity.
• :where() has zero specificity

:is(h1, h2, h3) {
  color: purple;
}

Best Practices for CSS Selectors

1. Use Specificity Wisely:
   Avoid overusing IDs. Opt for classes for better reusability.
2. Keep Selectors Simple:
   Overly complex selectors make maintenance harder.
3. Avoid Inline Styles:
   Use CSS rules to maintain separation of concerns.
4. Optimize for Performance:
   Deep descendant selectors (div div div) can slow down rendering.
5. Use Naming Conventions:
   Follow methodologies like BEM (Block Element Modifier) for readability and consistency.

Common Use Cases for CSS Selectors

1. Styling Forms:
   Attribute selectors and pseudo-classes like :focus improve form UI/UX.
2. Highlighting Active Elements:
   Use :hover and :active to enhance interactivity.
3. Targeting Lists:
   Child selectors and :nth-child() simplify list styling.
4. Responsive Design:
   Combine media queries with selectors for adaptive layouts.