CSS Selectors

CSS selectors are used to select specific HTML elements and apply styles to them. Selectors can be based on the element's tag name, its attributes, or its relationship with other elements on the page.

Basic Selectors

1. Universal Selector

2. Class Selector

3. ID Selector

4. Element/Tag Selector

5. Attribute Selector

6. Descendant Selector

7. Child Selector

8. Adjacent sibling Selector

9. General sibling Selector

Universal Selector

The universal selector (*) selects all HTML elements on the page.

* {
  color: blue;
}

Class Selector

Class selectors target HTML elements based on their class attribute. Classes are used to group elements that share common styles. For example, the following CSS rule sets the background color for all elements with the class "highlight":

.highlight {
  background-color: yellow;
}

ID Selector

ID selectors target HTML elements based on their ID attribute. IDs are used to identify unique elements on the page. For example, the following CSS rule sets the font color for the element with the ID "header":

#header {
  color: blue;
}

Element / Tag Selector

Element selectors target HTML elements based on their tag names. For example, the following CSS rule sets the font size for all paragraphs on the page:

p {
  font-size: 16px;
}

Attribute Selector

Attribute selectors target HTML elements based on their attributes. For example, the following CSS rule sets the font size for all elements with a title attribute:

[title] {
  font-size: 14px;
}

Descendant Selector

Descendant selectors target HTML elements that are descendants of another element. For example, the following CSS rule sets the font color for all span elements that are descendants of a paragraph element:

p span {
  color: red;
}

Child Selector

Child selectors target HTML elements that are direct children of another element. For example, the following CSS rule sets the font color for all span elements that are direct children of a paragraph element:

p > span {
  color: red;
}

Adjacent Sibling Selector

Adjacent sibling selectors target the element that immediately follows another element. For example, the following CSS rule sets the font color for all span elements that immediately follow a paragraph element:

p + span {
  color: red;
}

General Sibling Selector

General sibling selectors target elements that follow another element, regardless of their position. For example, the following CSS rule sets the font color for all span elements that follow a paragraph element:

p ~ span {
  color: red;
}

Grouping Selectors

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.

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

Attribute Selectors

1. [attribute]

2. [attribute=value]

3. [attribute~=value]

4. [attribute|=value]

5. [attribute^=value]

6. [attribute$=value]

7. [attribute*=value]

[attribute]

This attribute selector is used to target elements with the specified attribute. For example, the following CSS rule sets the font color for all links with a title attribute:

a[title] {
  color: blue;
}

[attribute=value] Selector

This attribute selector is used to target an element with a specific attribute value. For example, the following CSS rule sets the font color for a button element with a "disabled" attribute

button[disabled="true"] {
  color: gray;
}

For example, the following CSS rule sets the font color for all links with a title attribute equal to "home"

a[title="home"] {
  color: green;
}

[attribute~=value] Selector

This attribute selector is used to target elements with the specified attribute and a value that is a space-separated list of words, one of which is the specified value. For example, the following CSS rule sets the font color for all links with a class attribute containing the word "active":

a[class~="active"] {
  color: red;
}

[attribute|=value] Selector

This attribute selector is used to target elements with the specified attribute and a value that is either equal to the specified value or begins with the specified value followed by a hyphen. For example, the following CSS rule sets the font color for all elements with a lang attribute equal to "en" or starting with "en-":

[lang|="en"] {
  color: purple;
}

[attribute^=value] Selector

This attribute selector is used to target an element with an attribute value that starts with a specific value. For example, the following CSS rule sets the font color for a button element with a "data-" attribute that starts with "popup":

button[data^="popup"] {
  color: purple;
}

For example, the following CSS rule sets the font color for all links with a href attribute starting with "http":

a[href^="http"] {
  color: pink;
}

[attribute$=value] Selector

This attribute selector is used to target an element with an attribute value that ends with a specific value. For example, the following CSS rule sets the font color for a button element with a "data-" attribute that ends with "menu":

button[data$="menu"] {
  color: orange;
}

For example, the following CSS rule sets the font color for all images with a src attribute ending in ".png":

img[src$=".png"] {
  color: orange;
}

[attribute*=value] Selector

This attribute selector is used to target an element with an attribute value that contains a specific value. For example, the following CSS rule sets the font color for a button element with a "data-" attribute that contains the value "popup":

button[data*="popup"] {
  color: pink;
}

For example, the following CSS rule sets the font color for all links with a href attribute containing the word "example":

a[href*="example"] {
  color: brown;
}

Pseudo-classes Selectors

Pseudo-classes target elements based on their state or position.

1. :link Selector

2. :hover Selector

3. :visited Selector

4. :active Selector

5. :focus Selector

6. :checked Selector

7. :first-child Selector

8. :last-child Selector

9. :nth-child() Selector

10. :nth-last-child() Selector

11. :not() Selector

12. :root Selector

13. :nth-of-type() Selector

14. :nth-last-of-type() Selector

15. :first-of-type Selector

16. :last-of-type Selector

17. :nth-last-child Selector

18. :only-child Selector

19. :only-of-type Selector

20. :empty Selector

21. :disabled Selector

22. :enabled Selector

23. :target Selector

:link Selector

This pseudo-class selector is used to select unvisited links. For example, the following CSS rule sets the background color for a link when the user unvisited it:

a:link {
  background-color: yellow;
}

:hover Selector

This pseudo-class is used to target an element when the user hovers over it with their mouse. For example, the following CSS rule sets the font color for a link when the user hovers over it:

a:hover {
  color: red;
}

:visited Selector

This pseudo-class applies once the link has been visited by the user. For privacy reasons, the styles that can be modified using this selector are very limited. The :visited pseudo-class applies only and elements that have an href attribute.

a:visited {
  color: purple;
}

:active Selector

This pseudo-class is used to target an element while it is being activated, such as when the user clicks on a link. For example, the following CSS rule sets the font color for a link while it is being clicked:

a:active {
  color: green;
}

:focus Selector

This pseudo-class is used to target an element that has focus, such as a form input field. For example, the following CSS rule sets the background color for a form input field that has focus:

input:focus {
  background-color: yellow;
}

:checked Selector

This pseudo-class is used to target radio buttons or checkboxes that have been checked. For example, the following CSS rule sets the font color for a label associated with a checked checkbox:

input[type="checkbox"]:checked + label {
  color: blue;
}

For example, the following CSS rule sets the background color for a checkbox that is checked

input[type="checkbox"]:checked {
  background-color: green;
}

:first-child Selector

This pseudo-class is used to target the first child element of its parent. For example, the following CSS rule sets the font color for the first child element of a list:

li:first-child {
  color: blue;
}

:last-child Selector

This pseudo-class is used to target the last child element of its parent. For example, the following CSS rule sets the font color for the last child element of a list:

li:last-child {
  color: red;
}

:nth-child() Selector

This pseudo-class is used to target an element based on its position among its siblings. The nth-child() function takes a formula as its argument that determines which element to target. For example, the following CSS rule sets the font color for every third child element of a list:

li:nth-child(3n) {
  color: green;
}

:nth-last-child() Selector

This pseudo-class is similar to the nth-child() selector, but targets elements based on their position from the end of their parent. For example, the following CSS rule sets the font color for the second-to-last child element of a list:

li:nth-last-child(2) {
  color: orange;
}

:not() Selector

This pseudo-class is used to target elements that do not match a certain selector. The :not() function takes a selector as its argument and targets all elements that do not match that selector. For example, the following CSS rule sets the font color for all list items that are not the first child element:

li:not(:first-child) {
  color: purple;
}

:root Selector

This pseudo-class is used to target the root element of a document, which is usually the <html> element. For example, the following CSS rule sets the background color of the entire page to gray:

:root {
  background-color: gray;
}

:nth-of-type Selector

This pseudo-class is similar to :nth-child, but it only targets elements of a specific type. For example, the following CSS rule sets the font color for every other paragraph element:

p:nth-of-type(even) {
  color: orange;
}

:nth-last-of-type Selector

This pseudo-class is similar to :nth-of-type, but it counts the child elements from the end of the parent element instead of the beginning. For example, the following CSS rule sets the font color for every other paragraph element, starting from the second-to-last paragraph:

p:nth-last-of-type(even + 1) {
  color: brown;
}

:first-of-type Selector

This pseudo-class is used to target the first element of a specific type within a parent element. For example, the following CSS rule sets the font color for the first paragraph element in a div container:

div p:first-of-type {
  color: green;
}

:last-of-type Selector

This pseudo-class is used to target the last element of a specific type within a parent element. For example, the following CSS rule sets the font color for the last paragraph element in a div container:

div p:last-of-type {
  color: red;
}

:nth-last-child Selector

This pseudo-class is similar to :nth-child, but it counts the child elements from the end of the parent element instead of the beginning. For example, the following CSS rule sets the font color for the second-to-last list item in an unordered list:

ul li:nth-last-child(2) {
  color: purple;
}

:only-child Selector

This pseudo-class is used to target an element that is the only child of its parent element. For example, the following CSS rule sets the font color for a paragraph element that is the only child of a div container:

div p:only-child {
  color: blue;
}

:only-of-type Selector

This pseudo-class is used to target an element that is the only one of its type within a parent element. For example, the following CSS rule sets the font color for a paragraph element that is the only one of its type within a div container:

div p:only-of-type {
  color: yellow;
}

:empty Selector

This pseudo-class is used to target an element that has no child elements or text content. For example, the following CSS rule sets the font color for an empty div element:

div:empty {
  color: black;
}

:disabled Selector

This pseudo-class is used to target input elements that are disabled. For example, the following CSS rule sets the opacity for a disabled input element:

input:disabled {
  opacity: 0.5;
}

:enabled Selector

This pseudo-class is used to target input elements that are enabled. For example, the following CSS rule sets the font color for an enabled input element:

input:enabled {
  color: blue;
}

:target Selector

This pseudo-class is used to target the element that is currently being targeted by a URL fragment identifier (i.e., the part of the URL after the "#"). For example, the following CSS rule sets the background color for a div element that is the target of the URL fragment identifier "#about":

div:target {
  background-color: yellow;
}

Pseudo-elements Selector

Pseudo-elements target specific parts of an element, such as the first letter or first line.

1. ::first-letter Selector

2. ::before Selector

3. ::after Selector

::first-letter Selector

::before Selector

This pseudo-element is used to insert content before an element. For example, the following CSS rule inserts a "*" before every paragraph element:

p::before {
  content: "*";
}

:: after Selector

This pseudo-element is used to insert content after an element. For example, the following CSS rule inserts a "!" after every button element:

button::after {
  content: "!";
}

Follow for more

Linkedin: https://www.linkedin.com/in/prahladinala/
Github: https://github.com/prahladinala/
Instagram: https://instagram.com/prahlad.inala/
Twitter: https://twitter.com/prahladinala
Figma Community: https://www.figma.com/@prahladinala
Dribbble: https://dribbble.com/prahladinala
Behance: https://www.behance.net/prahladinala
Personal Portfolio: https://prahladinala.in
ToolMate: https://toolmate.co.in

Thank you!