DEV Community

Vasanth S
Vasanth S

Posted on

CSS Selectors: Definitions and Examples

#css #html #programming #webdev

CSS Selectors are used to find or select HTML element that you want to style

These are divided into categories

Universal Selectors
Selects all elements on the page

Example:

* {
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

Type Selector (element)
Selects all elements of the specified type.

Example:

p { color: blue; }
Enter fullscreen mode Exit fullscreen mode

Class Selector (.classname)
Selects all elements with a specific class.

Example:

.box { border: 1px solid black; }
Enter fullscreen mode Exit fullscreen mode

ID Selector (#idname)
Selects the element with the specific ID.

Example:

#header { font-size: 20px; }
Enter fullscreen mode Exit fullscreen mode

Grouping Selector (A, B)

Applies the same styles to multiple selectors.

Example:

h1, h2, p { color: green; }
Enter fullscreen mode Exit fullscreen mode

Descendant Selector (A B)

Selects elements inside another element.

Example:

div p { font-style: italic; }
Enter fullscreen mode Exit fullscreen mode

Child Selector (A > B)

Selects direct child elements only.

Example:

ul > li { list-style-type: circle; }
Enter fullscreen mode Exit fullscreen mode

Adjacent Sibling Selector (A + B)

Selects the element immediately after the specified one.

Example:

h2 + p { color: red; }
Enter fullscreen mode Exit fullscreen mode

General Sibling Selector (A ~ B)

Selects all siblings after a specified element.

Example:

h2 ~ p { font-weight: bold; }
Enter fullscreen mode Exit fullscreen mode

Attribute Selector ([attr])

Selects elements with the given attribute.

Example:

input[required] { border: 1px solid red; }
Enter fullscreen mode Exit fullscreen mode

Attribute with Value ([attr="value"])

Selects elements with a specific attribute value.

Example:

input[type="text"] { width: 150px; }
Enter fullscreen mode Exit fullscreen mode

Pseudo-class Selector (:pseudo-class)

Selects elements in a specific state or condition.

Example:

a:hover { color: orange; }
Enter fullscreen mode Exit fullscreen mode

Pseudo-element Selector (::pseudo-element)

Styles specific parts of an element.

Example:

p::first-letter { font-size: 30px; }
Enter fullscreen mode Exit fullscreen mode

:first-child Selector

Selects the first child of its parent.

Example:

li:first-child { color: blue; }
Enter fullscreen mode Exit fullscreen mode

:last-child Selector

Selects the last child of its parent.

Example:

li:last-child { color: red; }
Enter fullscreen mode Exit fullscreen mode

:nth-child(n) Selector

Selects the nth child of its parent.

Example:

li:nth-child(2) { background: yellow; }
Enter fullscreen mode Exit fullscreen mode

:not(selector) Selector

Selects elements that don’t match the given selector.

Example:

p:not(.info) { color: black; }
Enter fullscreen mode Exit fullscreen mode

:checked Selector

Selects checked checkboxes or radio buttons.

Example:

input:checked { outline: 2px solid green; }
Enter fullscreen mode Exit fullscreen mode

:disabled and :enabled

Selects form elements based on whether they are disabled or enabled.

Example:

input:disabled { background: #eee; }
Enter fullscreen mode Exit fullscreen mode

:empty Selector

Selects elements with no children or text.

Example:

div:empty { display: none; }
Enter fullscreen mode Exit fullscreen mode

The above content is just an introduction to the CSS selectors I know. If I learn anything new, I will share it later. Thank you for reading and for your patience.

Top comments (0)