CSS is one of the most crucial components of building any web application. A common problem developers face is that CSS styles apply differently than intended, particularly when multiple style properties come into play. This article discusses CSS selectors and specificity (rules defining how CSS styles are applied to specific elements). This will help us to understand and solve the issue of CSS styles getting overridden in the browser.
Understanding CSS Selectors
These selectors are the building blocks of CSS, enabling developers to target HTML elements with precision.
They include the following:
Universal Selector: The universal selector is represented by an asterisk (*). This selector acts like a wildcard and targets every element within a document or selects all the descendant elements when combined with other elements. It’s mostly used to apply styles universally.
Type Selector (Element Selector): This selector targets specific HTML tags or elements within your document. For instance, you can use ‘p’ as the selector to style all paragraphs within your document.
p {
/* Styles for all paragraphs */
}
Class Selector: The class selector is identified with a leading dot (.) character. It targets elements with a specific class attribute, and it’s case-sensitive, allowing for the repeated application across various elements in a document. For example, a 'highlight' class can be used to emphasize different sections, as shown below:
.highlight {
/* Styles for elements with class="highlight" */
}
ID Selector: The case-sensitive ID selector begins with a # rather than a dot character but is used the same way as a class selector. However, an ID can be used only once per page, and elements can only have a single ID value applied to them. It can select an element with the ID set on it, and you can precede the ID with a type selector to target the element only if both the element and ID match. For instance, styling the header of a page would typically use the ID Selector as follows:
#header {
/* Styles for the element with id="header" */
}
Attribute Selector and Attribut-Value Selector: In CSS, you can use attribute selectors to target elements with certain attributes and Attribute-value to select elements based on the presence or value of their attributes. For example, [type="text"] selects all elements with type="text"
[type="text"] {
/* styles */
}
Pseudo-Classes and Pseudo-Elements in CSS
Pseudo-classes and pseudo-elements represent another layer of sophistication in CSS selectors. Pseudo-classes, denoted by a colon (:), allow you to target elements in a specific state. For example, the :hover pseudo-class is widely used to define elements' styles when hovered over by a mouse pointer. This feature enhances user interaction, as shown in the following snippet:
a:hover {
/* styles */
}
Pseudo-elements behave similarly. However, they act like you added a whole new HTML element into the markup rather than applying a class to existing elements. Pseudo-elements start with a double colon ::. Some early pseudo-elements used the single colon syntax, so you may see this in code or examples. Modern browsers support the early pseudo-elements with single or double-colon syntax for backward compatibility. For example, if you wanted to select the first line of a paragraph, you could wrap it in a <span> element and use an element selector. The first-line pseudo-element selector will do this for you reliably — if the number of words increases or decreases, it will only select the first line. For example, ::before inserting content before an element's actual content.
p::before {
/* styles */
content: "Before text";
}
