CSS selectors

by | Sep 8, 2024 | Technology

CSS selectors are patterns used to select and style HTML elements. There are various types of selectors, each with different capabilities. Below is a comprehensive guide to CSS selectors:

1. Basic Selectors

Element Selector

Selects all instances of a specific HTML element.

Example:

css

p {
color: blue;
}
  • This will apply the style to all <p> (paragraph) elements.

ID Selector

Selects an element with a specific ID. IDs must be unique within a page.

Example:

css

#header {
background-color: gray;
}
  • This targets the element with the id="header".

Class Selector

Selects elements with a specific class. Multiple elements can share the same class.

Example:

css

.button {
background-color: green;
}
  • This will apply the style to all elements with class="button".

2. Attribute Selectors

Select elements based on their attributes.

[attribute] Selector

Selects elements that have a specified attribute.

Example:

css

input[type="text"] {
border: 1px solid black;
}
  • This will style all <input> elements with type="text".

[attribute^=”value”]

Selects elements whose attribute value starts with a specific string.

Example:

css

a[href^="https"] {
color: green;
}
  • This will style links (<a>) whose href starts with “https”.

[attribute$=”value”]

Selects elements whose attribute value ends with a specific string.

Example:

css

img[src$=".png"] {
border: 2px solid red;
}
  • This will style all <img> elements that have a src ending with .png.

[attribute=”value”]*

Selects elements whose attribute value contains a specific string.

Example:

css

a[href*="example"] {
text-decoration: underline;
}
  • This will style links containing “example” in the href.

3. Combinators

Descendant Selector (space)

Selects elements that are nested within another element.

Example:

css

div p {
color: red;
}
  • This selects all <p> elements inside any <div>.

Child Selector (>)

Selects elements that are direct children of a specified element.

Example:

css

ul > li {
list-style-type: none;
}
  • This targets <li> elements that are direct children of <ul>.

Adjacent Sibling Selector (+)

Selects an element that is directly after another specific element.

Example:

css

h1 + p {
margin-top: 0;
}
  • This selects the first <p> element directly after any <h1>.

General Sibling Selector (~)

Selects all elements that are siblings of a specified element.

Example:

css

h1 ~ p {
color: blue;
}
  • This selects all <p> elements that are siblings of any <h1>.

4. Pseudo-classes

Styles an element when the user hovers over it.

Example:

css

a:hover {
color: orange;
}
  • Changes the color of links when the user hovers over them.

(n)

Selects the nth child of a parent element.

Example:

css

li:nth-child(2) {
background-color: lightgray;
}
  • Styles the second child <li> of a list.

Selects the first child of an element.

Example:

css

p:first-child {
font-weight: bold;
}
  • Applies bold to the first <p> child of its parent.

Selects the last child of an element.

Example:

css

p:last-child {
margin-bottom: 20px;
}
  • Adds extra margin to the last <p> in a parent.

5. Pseudo-elements

::before

Inserts content before the content of an element.

Example:

css

h2::before {
content: "Note: ";
color: red;
}
  • Adds “Note: ” before every <h2> element.

::after

Inserts content after the content of an element.

Example:

css

h2::after {
content: "!";
color: green;
}
  • Adds an exclamation mark after every <h2> element.

::first-line

Styles the first line of a block of text.

Example:

css

p::first-line {
font-weight: bold;
}
  • Bolds only the first line of each paragraph.

::selection

Styles the portion of an element selected by the user.

Example:

css

::selection {
background-color: yellow;
}
  • Changes the background color of text when the user selects it.

Selector Examples:

  1. Element and Class Selector Combination:
    css

    p.intro {
    font-size: 18px;
    }
    • This applies styles only to <p> elements with the intro class.
  2. ID and Pseudo-class Selector:
    css

    #nav:hover {
    background-color: lightblue;
    }
    • Changes the background color when hovering over an element with the id="nav".
  3. Attribute and Child Selector:
    css

    div > input[type="submit"] {
    background-color: green;
    }
    • Targets all submit buttons that are direct children of a <div>.
×
Sign in
Sign up

Sign In

Sign Up