Blog

CSS

Selectors

CSS Selectors

A CSS selector selects the HTML element(s) for styling purpose. CSS selectors

Vignesh Kalithas

Vignesh Kalithas

Sep 23, 2022 · 9 min read

A CSS selector selects the HTML element(s) for styling purpose. We can divide CSS selectors into five categories

  1. Simple
  2. Combinator
  3. Pseudo-class
  4. Pseudo-element
  5. Attribute

Select elements based on element, id, class

This group includes selectors that target an HTML element such as an <h1>


_3
h1 {
_3
color: red;
_3
}

Selects all elements


_3
* {
_3
color: green;
_3
}

  • Universal selectors can be namespaced when using @namespace

  • This is useful when dealing with documents containing multiple namespaces such as HTML with inline SVG or MathML, or XML that mixes multiple vocabularies

  1. ns|* - matches all elements in namespace ns
  2. *|* - matches all elements
  3. |* - matches all elements without any declared namespace
  • The .class selector selects elements with a specific class attribute
  • To select elements with a specific class, write a period . character, followed by the name of the class
  • To select and style all elements with class="super"

_3
.super {
_3
background-color: yellow;
_3
}

  • The id selector uses the id attribute of an HTML element to select a specific element.
  • The id of an element is unique within a page, so the id selector is used to select one unique element!
  • To select an element with a specific id, write a hash # character, followed by the id of the element
  • The CSS rule below will be applied to the HTML element with id="para1"

_4
#para1 {
_4
text-align: center;
_4
color: red;
_4
}

  • The grouping selector selects all the HTML elements with the same style definitions
  • Look at the following CSS code ( h1, h2, and p elements have the same style definitions)

_14
h1 {
_14
text-align: center;
_14
color: red;
_14
}
_14
_14
h2 {
_14
text-align: center;
_14
color: red;
_14
}
_14
_14
p {
_14
text-align: center;
_14
color: red;
_14
}

  • It would be better to group the selectors, to minimize the code

_6
h1,
_6
h2,
_6
p {
_6
text-align: center;
_6
color: red;
_6
}

A combinator is something that explains the relationship between the selectors

  1. Descendant selector (space)
  2. Child selector >
  3. Adjacent sibling selector +
  4. General sibling selector ~
  • The descendant selector matches all elements that are descendants of a specified element
  • Selects all <p> elements inside <div>elements

_3
div p {
_3
background-color: yellow;
_3
}

Child selector >

  • The child selector selects all elements that are the children of a specified element
  • Selects all <p> elements that are children of a <div> element

_3
div > p {
_3
background-color: red;
_3
}

Adjacent Sibling Selector +

  • The adjacent sibling selector is used to select an element that is directly after another specific element
  • Sibling elements must have the same parent element, and adjacent means immediately following
  • Selects the first <p> element that are placed immediately after <div> elements

_3
div + p {
_3
background-color: yellow;
_3
}

General Sibling Selector ~

  • The general sibling selector selects all elements that are next siblings of a specified element
  • Selects all <p> elements that are next siblings of <div> elements

_4
div ~ p {
_4
back
_4
ground-color: yellow;
_4
}

Select elements based on a certain state of the element

  1. A pseudo-class is used to define a special state of an element
  2. Style an element when a user mouses over it
  3. Style visited and unvisited links differently
  4. Style an element when it gets focus

_3
selector:pseudo-class {
_3
property: value;
_3
}


_19
/* unvisited link */
_19
a:link {
_19
color: #ff0000;
_19
}
_19
_19
/* visited link */
_19
a:visited {
_19
color: #00ff00;
_19
}
_19
_19
/* mouse over link */
_19
a:hover {
_19
color: #ff00ff;
_19
}
_19
_19
/* selected link */
_19
a:active {
_19
color: #0000ff;
_19
}

  • Pseudo-classes can be combined with HTML classes
  • When you hover over the link with highlight class, it will change color

_3
a.highlight:hover {
_3
color: #ff0000;
_3
}

Hover on <div> An example of using the :hover pseudo-class on a <div> element


_4
div:hover {
_4
backg
_4
round-color: blue;
_4
}

  • Hover over a <div> element to show a <p> element (like a tooltip)
  • Hover over me to show the <p> element

_9
p {
_9
display: none;
_9
background-color: yellow;
_9
padding: 20px;
_9
}
_9
_9
div:hover p {
_9
display: block;
_9
}

  • The :first-child pseudo-class matches a specified element that is the first child of another element
  • Match the first <p> element. Below, the selector matches any <p> element that is the first child of any element

_3
p:first-child {
_3
color: blue;
_3
}

Applies the styles to <i>, only if <i> is first-child in any <p> element


_3
p i:first-child {
_3
color: blue;
_3
}

Applies the styles to all <i> descendants of <p> where <p> is the first-child


_3
p:first-child i {
_3
color: blue;
_3
}

  • The :lang pseudo-class allows you to define special rules for different languages
  • In the example below, :lang defines the quotation marks for <q> elements with lang="no"

_12
<html>
_12
<head>
_12
<style>
_12
q:lang(no) {
_12
quotes: "~""~";
_12
}
_12
</style>
_12
</head>
_12
<body>
_12
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
_12
</body>
_12
</html>

When the element is focused the style will be applied.


_13
<!DOCTYPE html>
_13
<html>
_13
<head>
_13
<style>
_13
input:focus {
_13
background-color: yellow;
_13
}
_13
</style>
_13
</head>
_13
<body>
_13
<input type="text" name="username" placeholder="Username" />
_13
</body>
_13
</html>

Selects and style a part of an element. Usually added for decoration purposes

What are Pseudo-Element ?

  • A CSS pseudo-element is used to style specified parts of an element
  • pseudo refers to fake. Hence they are fake elements int the page
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

_3
selector::pseudo-element {
_3
property: value;
_3
}

  • Adds a special style to the first line of a text
  • The following example formats the first line of the text in all <p> elements

_4
p::first-line {
_4
color: #ff0000;
_4
font-variant: small-caps;
_4
}

  • Adds a special style to the first letter of a text
  • The following example formats the first letter of the text in all <p> elements

_4
p::first-letter {
_4
color: #ff0000;
_4
font-size: xx-large;
_4
}

Pseudo-elements can be combined with HTML classes


_4
p.intro::first-letter {
_4
color: #ff0000;
_4
font-size: 200%;
_4
}

  • Several pseudo-elements can also be combined
  • In the following example, the first letter of a paragraph will be red & in an xx-large font size
  • The rest of the first line will be blue, and in small-caps
  • The rest of the paragraph will be the default font size and color

_9
p::first-letter {
_9
color: #ff0000;
_9
font-size: xx-large;
_9
}
_9
_9
p::first-line {
_9
color: #0000ff;
_9
font-variant: small-caps;
_9
}

  • Inserts some content before the content of an element.
  • The following example inserts an image before the content of each <h1> element

_3
h1::before {
_3
content: url(smiley.gif);
_3
}

  1. Inserts some content after the content of an element.
  2. The following example inserts an image after the content of each <h1> element

_3
h1::after {
_3
content: url(smiley.gif);
_3
}

The ::marker pseudo-element selects the markers of list items


_4
::marker {
_4
color: red;
_4
font-size: 23px;
_4
}

  • Matches the portion of an element that is selected
  • The following CSS properties can be applied to ::selection - color, background, cursor, and outline
  • The selected text red on a yellow background

_4
::selection {
_4
color: red;
_4
background: yellow;
_4
}

Selects elements based on an attribute or an attribute value

  • Style HTML Elements With Specific Attributes
  • It is possible to style HTML elements that have specific attributes or attribute values
  • Selects elements with a specified attribute.
  • Selects all <a> elements with a target attribute

_3
a[target] {
_3
background-color: yellow;
_3
}

Value =

  • Selects elements with a specified attribute and value
  • Selects all <a> elements with a target="_blank" attribute

_3
a[target="_blank"] {
_3
background-color: yellow;
_3
}

Includes word ~=

  • Selects elements with an attribute value containing a specified word
  • Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"

_3
[title~="flower"] {
_3
border: 5px solid yellow;
_3
}

Hyphen word |=

Selects elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen -


_3
[class|="top"] {
_3
background: yellow;
_3
}

Starst with ^=

  • Selects elements with the specified attribute, whose value starts with the specified value
  • Selects all elements with a class attribute value that starts with top

_3
[class^="top"] {
_3
background: yellow;
_3
}

Ends with $=

  • Selects elements whose attribute value ends with a specified value
  • Selects elements with a class attribute value that ends with test

_3
[class$="test"] {
_3
background: yellow;
_3
}

Contains letter *=

  • Selects elements whose attribute value contains a specified value
  • Selects elements with a class attribute value that contains te

_3
[class*="te"] {
_3
background: yellow;
_3
}

MDN

@ragavkumarv
swipe to next ➡️