CSS Selectors

Understanding CSS Selectors

What are CSS Selectors?

CSS selectors are patterns used to select and style HTML elements on a webpage. They allow you to target specific elements based on their type, class, ID, attributes, or other factors. Understanding how to use different types of selectors is crucial for effective CSS styling.

1. Basic Selectors

There are a few fundamental selectors in CSS that are essential for styling:

• Element Selector: This selector targets an HTML element like h1, p, etc. It is the most basic way to apply styles to elements.
• Class Selector: This selector targets elements with a specific class attribute, using a period (.) before the class name (e.g., .class-name).
• ID Selector: The ID selector targets a unique element with a specific ID using the hash (#) symbol (e.g., #id-name).

Example: Styling a header, paragraph, and a specific section with classes and IDs:

/* Element Selector */
h1 {
    color: blue;
}

/* Class Selector */
.class-name {
    font-size: 20px;
}

/* ID Selector */
#id-name {
    background-color: yellow;
}
                

2. Attribute Selectors

Attribute selectors target elements based on the presence or value of an attribute. You can use them to select elements with specific attributes like type, href, or src.

• [attribute]: Selects elements that have the given attribute.
• [attribute="value"]: Selects elements that have the specified attribute with a particular value.
• [attribute^="value"]: Selects elements whose attribute value starts with a specified value.
• [attribute$="value"]: Selects elements whose attribute value ends with a specified value.
• [attribute*="value"]: Selects elements whose attribute value contains a specified value.

Example: Targeting an input field and anchor tags based on attributes:

/* Attribute Selector */
input[type="text"] {
    border: 1px solid #ccc;
    padding: 10px;
}

/* Attribute Selector for anchor links */
a[href^="https"] {
    color: green;
    text-decoration: underline;
}

/* Select all links ending with ".pdf" */
a[href$=".pdf"] {
    font-weight: bold;
}
                

3. Pseudo-classes

Pseudo-classes are used to define the special state of an element. These are helpful for adding styles based on user interaction or element position:

• :hover – Targets an element when the user hovers over it.
• :focus – Targets an element when it gains focus (e.g., an input field).
• :nth-child() – Targets elements based on their position in a list of siblings.
• :first-child – Targets the first child element within a parent.
• :last-child – Targets the last child element within a parent.

Example: Hover effect, focus styles, and targeting specific child elements:

/* :hover pseudo-class */
button:hover {
    background-color: green;
}

/* :focus pseudo-class */
input:focus {
    border-color: blue;
}

/* :nth-child pseudo-class */
ul li:nth-child(odd) {
    background-color: #f0f0f0;
}

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

4. Pseudo-elements

Pseudo-elements allow you to style specific parts of an element. You can insert content before or after an element or manipulate a part of the text inside an element:

• ::before – Inserts content before an element.
• ::after – Inserts content after an element.
• ::first-letter – Targets the first letter of an element.
• ::first-line – Targets the first line of text in an element.

Example: Adding content before and after elements and styling the first letter of a paragraph:

/* ::before pseudo-element */
p::before {
    content: "Note: ";
    font-weight: bold;
}

/* ::after pseudo-element */
p::after {
    content: " Please read more.";
}

/* ::first-letter pseudo-element */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: red;
}
                

5. Combining Selectors

Sometimes, you will want to combine selectors to target elements more precisely. You can combine different selectors using the following methods:

• Descendant Selector: ancestor descendant – Selects elements that are descendants of a particular ancestor.
• Child Selector: parent > child – Selects elements that are direct children of a particular parent.
• Adjacent Sibling Selector: prev + next – Selects an element that immediately follows a particular sibling.
• General Sibling Selector: prev ~ next – Selects an element that is preceded by a particular sibling.

Example: Targeting elements using descendant and child selectors:

/* Descendant Selector */
div p {
    color: blue;
}

/* Child Selector */
ul > li {
    list-style-type: square;
}

/* Adjacent Sibling Selector */
h2 + p {
    font-style: italic;
}

/* General Sibling Selector */
h2 ~ p {
    color: gray;
}