CSS Syntax Overview

### Basic Syntax

selector {
  property: value;
}

– **`selector`**: Specifies which HTML elements the style applies to.
– **`property`**: The specific style aspect to be changed (e.g., color, font-size).
– **`value`**: The value assigned to the property.

—

### Example:

/* Applies a red color to all <p> elements */
p {
  color: red;
}

/* Sets font size and background color for elements with class "header" */
.header {
  font-size: 20px;
  background-color: #f0f0f0;
}

/* Targets an element with the ID "main" */
#main {
  padding: 10px;
  border: 1px solid black;
}

—

### Key Features of CSS Syntax
1. **Selectors**:
– `*` → Universal selector (applies to all elements).
– `element` → Targets specific elements (e.g., `p`, `div`).
– `.class` → Targets elements with a specific class.
– `#id` → Targets elements with a specific ID.

2. **Properties and Values**:
– Properties define what you want to style, such as `color`, `margin`, or `font-size`.
– Values specify the style setting for that property.

3. **Nested Rules (CSS in SCSS/SASS)**:
In preprocessors like SCSS, you can nest selectors:

nav {
     ul {
       margin: 0;
       li {
         list-style: none;
       }
     }
   }

4. **Comments**:
– CSS: `/* This is a comment */`
– SCSS: Same as CSS, using `/* */`.

Let me know if you’d like more specific examples or advanced CSS features!

### Syntax

selector:has(selector) {
  property: value;
}

### Key Features
– It selects an element if it **contains** (or is related to) another element matching the specified selector inside the `:has()` function.
– It works with various combinators to target siblings, children, or other relations.

—

### Example Use Cases

#### 1. Style a Parent Based on Its Child

/* Add a border to a <div> if it has a <p> inside */
div:has(p) {
  border: 2px solid blue;
}

#### 2. Style a Sibling Based on Another Element

/* Style the next <div> after an <h1> */
h1:has(+ div) {
  color: red;
}

/* Style a <div> if it is preceded by an <input> */
input:has(~ div) {
  background-color: yellow;
}

#### 3. Conditional Styling Based on Input State

/* Highlight a form group if the input inside it is focused */
.form-group:has(input:focus) {
  background-color: lightblue;
}

#### 4. Complex Nested Conditions

/* Style a <ul> that has a <li> with a specific class */
ul:has(li.active) {
  padding: 10px;
  border: 1px solid gray;
}

—

### Use with Combinators
The `:has()` pseudo-class is often combined with child (`>`), adjacent sibling (`+`), general sibling (`~`), or descendant (` `) combinators.

Example:

/* Style a parent element if any grandchild is selected */
div:has(> span > a.selected) {
  border-color: green;
}

—

### Browser Support
As of now, `:has()` is supported in most modern browsers:
– **Supported**: Chrome 105+, Edge 105+, Safari 15.4+, Opera.
– **Not Fully Supported**: Firefox (as of 2024, partial implementation is planned).

You may need a fallback or alternative solutions (like JavaScript) for unsupported browsers.

—

### Practical Applications
1. **Interactive Forms**:

label:has(input:checked) {
     font-weight: bold;
   }

2. **Menus with Active States**:

nav:has(a.active) {
     background-color: #333;
     color: white;
   }

3. **Error States**:

.form-group:has(input:invalid) {
     border: 1px solid red;
   }

Let me know if you'd like more practical examples or detailed guidance on using `:has()`!