csspages

Home

Selectors in CSS

Introduction

Selector is the first part of any CSS rule. The selector identifies to which part or section of the HTML document the rule will be applied.

    selector {
        property: value;
        ....
    }

Simple Selectors

Select elements based on name, id, class

name of element

The name of the element is directly used as the selector.

eg

    body {
        ...
    }
    div {
        ...
    }
    input {
        ...
    }

id of element

In HTML, some elements can be identified with the id attribute.

    <p id='idname'>This is a some text.</p>

In CSS, the selector for this will start with a hash (#) followed by the name of the id.

eg

    #idname {
        ...
    }

class of element

In HTML, when you may define a class attribute.

    <div class='container'>...</div>

In CSS, the selector for the class starts with a period (.) followed by the name of the class.

    .container {
        ...
    }

Multiple class names can be marked in HTML by seperating them with a space.

    <div class='card card-info'>

When multiple classes are defined, then the styling rules will apply in the order they are listed. The latest value for a property will prevail if the property values are given in more than one class.

Attribute Selector

Attribute selector matches elements based on the value of some of its attribute.

• [attr]
• [attr=value]
• [attr~=value]
• [attr|=value]
• [attr^=value]
• [attr$=value]
• [attr*=value]
• [attr operator value i]
• [attr operator value s]

. and # are special operators to identify the attributes id and class. [] allow to select any attribute.

selector	description
a[target]	any element a having a target attribute
a[target='_blank']	any anchor element having target = _blank
div[class\|="card"]	any div with class having value the whole word card or card followed by -, like card-head or card-body
div[class^="card"]	any div with class whose value starts with card
div[class$="head"]	any div with class whose value ends with head
div[class*="card"]	any div with class having value contains the string card anywhere

Selector List - Comma (,) separated

    div, li, .card-info {
        ...
    }

If the same styling is to be applied to multiple selectors then use comma (,) to separate the selectors and then define the css rule.

Combinators

A combinator is a combination of two or more selectors used together. Combinators are used define the specificity of the selector.

Descendant Selector (space)

eg

    div p {
        ...
    }

This will select all ps under all divs. ps in any child of the divs will also be included.

Child Selector (>)

eg

    div > p {
        ...
    }

This will select all ps directly under all divs. ps nested inside any child of div will not be included.

Adjacent Sibling Selector (+)

eg

    div + p {
        ...
    }

This will select ps that are immediately after divs - at the same level. No parent or child will be included.

General Sibling Selector (~)

eg

    div ~ p {
        ...
    }

This will select ps that are anywhere after divs - at the same level. No parent or child will be included.

Nested Selector (with and without &)

preceding selector with &

    .parent {
        ...
        & :nested {
            ...
        }
    }

evaluates to…

    .parent {
        ... parent rules
    }

    .parent:nested {
        ...child rules
    }

all .parent having puesdo-class :nested

without &

When the selector is nested without &, a space is added to the resulting nested css-rule, i.e.

    .parent {
        ... parent rules
        :nested {
            ... child rules
        }
    }

evaluates to…

    .parent {
        ... parent rules
    }

    .parent *:nested {
        ...child rules
    }

all descendants of .parent having puesdo-class :nested

adding & after the selector

    .outer {
        ... outer rules
        .nested & {
            ...nested rules
        }
    }

evaluates to…

    .outer {
        ... outer rules
    }

    .nested .outer {
        ...nested rules
    }

Here outer rules will apply normally apply .outer selector, but when .outer is a descendant of the .nested selector then the nested rules will apply.

adding multiple & after the selector

    .parent {
        ... parent rules
        .nested & & & {
            ...nested rules
        }
    }

the three &s evaluate to…

    .parent {
        ... parent rules
    }

    .nested .parent .parent .parent {
        ...child rules
    }

Pseudo-classes

Pseudo-classes are selectors that are recognized in the browser without explicitly being defined in the web-page.

A pseudo-class can used by adding : before it.

eg

  a:active          /* active links */
  div:hover         /* when mouse hovers over the <div> */
  div:first-child   /* the first child inside the <div> */

List of Pseudo-classes

• :active
• :any-link

• :dir(ltr

  rtl)

• :empty
• :has(selector)
• :hover
• :is(selector)
• :lang(language)
• :link
• :not(selector)
• :root
• :state(identifier)
• :target
• :visited
• :where(selector)

/* for child */

• :first-child
• :last-child
• :nth-child(position)
• :nth-last-child(position)
• :only-child

/* for of-type */

• :first-of-type
• :last-of-type
• :nth-of-type(position)
• :nth-last-of-type(position)
• :only-of-type

/* for inputs */

• :checked
• :disabled
• :enabled
• :focus
• :focus-visible
• :in-range
• :inderminate
• :invalid
• :optional
• :out-of-range
• :read-only
• :read-write
• :required
• :valid

CSS Pseudo Elements

Pseudo Elements are elements that the browser recognizes even though they are not defined in the web-page.

• ::after
• ::before
• ::file-selector-button
• ::first-letter
• ::first-line
• ::grammar-error
• ::marker
• ::placeholder
• ::selection
• ::spelling-error
• ::target-text
• ::backdrop
• ::cue
• ::highlight
• ::part
• ::slotted
• ::view-transition
• ::view-transition-image-pair()
• ::view-transition-group()
• ::view-transition-new()
• ::view-transition-old()

Home