CSS Selectors with Example

Card image cap

CSS Selector

Selectors are one of the most important aspects of CSS as they are used to select elements on a web page so that they can be styled. You can define selectors in various ways.

A CSS selector is a pattern to match the elements in an HTML document. The associated style rules is applied to the elements that match the selector pattern.

There are many different types of selectors in CSS, some of the important selectors are as shown below :



i). CSS Element Selector:

An Element Selector can apply the style by selecting the defined element,attributes, or tags directly.

example

Output:

	

This is blue color and will be applied on each paragraph. ha.ha.ha. me too even i too



ii). CSS Id Slector:

The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.

It is selected with the hash character (#),

Example:


Output:

	

Welcome to aimtocode.com

This paragraph will not be affected.



iii). CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period character .


Example:


Output:

	

This Text is blue and center-aligned.

This paragraph is also blue and center-aligned.



iv). CSS Universal Selector:

Universal Selector is used to select the over all element present in the body page, it means Universal selector perfom the operation of selection of all element in the web page.


Example :

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!



v). CSS Group Selector:

The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.


Example :

Output:


Hello World

Welcome to aimtocode.com (This is In smaller font)

This is a paragraph.


CSS Selectors

In CSS, selectors are patterns used to select the element(s) you want to style.

Selector Example Example description
class .intro Selects all elements with class="intro"
.class1.class2 <div class="name1 name2">...</div> Selects all elements with both name1 and name2 set within its class attribute
.class1 .class2 <div class="name1">
  <div class="name2">
    ...
  </div>
</div>
Selects all elements with name2 that is a descendant of an element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:default input:default Selects the default <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
>::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:indeterminate input:indeterminate Selects input elements that are in an indeterminate state
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
::placeholder input::placeholder Selects input elements with placeholder text
:read-only input:read-only Selects input elements with the "readonly" attribute specified
>:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links
Card image cap