## CSS `element.class` Selector The `element.class` selector is a specific type of CSS selector that targets a particular HTML element only when it has a specified class name. This allows you to apply styles to a subset of elements without affecting other elements of the same type or other elements sharing the same class. --- ## Definition and Usage The `element.class` selector combines an **element selector** (tag name) and a **class selector** (preceded by a dot `.`) with no spaces between them. * **`element`**: The HTML tag you want to target (e.g., `p`, `div`, `h1`, `button`). * **`.class`**: The specific class name assigned to that element. By combining them, you create a highly targeted rule. For example, while `.highlight` selects *any* element with the class "highlight", `p.highlight` will *only* select `

` elements that have the class "highlight". --- ## Syntax ```css element.class { property: value; } ``` ### Example: ```css p.hometown { background-color: yellow; } ``` *This rule will target only `

` elements that have `class="hometown"`. Other elements like `

` or plain `

` elements will be ignored.* --- ## Code Examples ### Example 1: Basic Usage In this example, we apply a yellow background color only to `

` elements with the class `hometown`. #### HTML: ```html

My Profile

I was born in Boston.

Welcome to Boston

I currently live in New York.

``` #### CSS: ```css p.hometown { background-color: yellow; font-weight: bold; } ``` --- ### Example 2: Multi-Class Selection You can also chain multiple classes to target an element that contains all of the specified classes. #### HTML: ```html Submit Cancel ``` #### CSS: ```css button.btn.active { background-color: green; color: white; } ``` --- ## Key Considerations & Best Practices 1. **No Spaces**: Ensure there is no space between the element name and the dot (e.g., write `p.highlight`, not `p .highlight`). Adding a space changes the meaning to a **descendant selector**, which would target any element with the class `highlight` that is *inside* a `

` element. 2. **Specificity**: The `element.class` selector has a higher specificity than a simple class selector (e.g., `p.highlight` overrides `.highlight`). Use it when you need to override general class styles for specific elements. 3. **Reusability**: Overusing `element.class` can make your CSS less reusable. If you want a class to look the same across all elements (like a generic `.error` message box), use a plain class selector instead of binding it to a specific element like `div.error`. --- ## Browser Support The `element.class` selector is a core feature of CSS and is fully supported by all modern and legacy web browsers. | Browser | Support Status | | :--- | :--- | | Google Chrome | Supported | | Mozilla Firefox | Supported | | Microsoft Edge / IE | Supported | | Safari | Supported | | Opera | Supported |