DEV Community

Cover image for Selectors in CSS
Gajendra Dhir
Gajendra Dhir

Posted on

Selectors in CSS

#selectors #nested #pseudoclasses #pseudoelements

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;
        ....
    }
Enter fullscreen mode Exit fullscreen mode

The rule is enclosed in { }. A rule allows us to specify on or more properties and their values that decides how it will render.

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 {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

id of element

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

    <p id='idname'>This is a some text.</p>
Enter fullscreen mode Exit fullscreen mode

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

eg

    #idname {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

class of element

In HTML, when you may define a class attribute.

    <div class='container'>...</div>
Enter fullscreen mode Exit fullscreen mode

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

    .container {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

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

    <div class='card card-info'>
Enter fullscreen mode Exit fullscreen mode

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.

Some examples...
| 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 {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

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 {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

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

Child Selector (>)

eg

    div > p {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

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 {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

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 {
        ...
    }
Enter fullscreen mode Exit fullscreen mode

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 {
            ...
        }
    }
Enter fullscreen mode Exit fullscreen mode

evaluates to...

    .parent {
        ... parent rules
    }

    .parent:nested {
        ...child rules
    }
Enter fullscreen mode Exit fullscreen mode

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
        }
    }
Enter fullscreen mode Exit fullscreen mode

evaluates to...

    .parent {
        ... parent rules
    }

    .parent *:nested {
        ...child rules
    }
Enter fullscreen mode Exit fullscreen mode

all descendants of .parent having puesdo-class :nested

adding & after the selector 

    .outer {
        ... outer rules
        .nested & {
            ...nested rules
        }
    }
Enter fullscreen mode Exit fullscreen mode

evaluates to...

    .outer {
        ... outer rules
    }

    .nested .outer {
        ...nested rules
    }
Enter fullscreen mode Exit fullscreen mode

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
        }
    }
Enter fullscreen mode Exit fullscreen mode

the three &s evaluate to...

    .parent {
        ... parent rules
    }

    .nested .parent .parent .parent {
        ...child rules
    }
Enter fullscreen mode Exit fullscreen mode

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> */
Enter fullscreen mode Exit fullscreen mode

List of Pseudo-classes

  • :active
  • :any-link
  • :dir
  • :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 do not have to be defined in the web-page, yet the browser recognizes these elements.

List of pseudo elements

  • ::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()

I hope you find this useful.

Top comments (0)