Selector	Behavior
.class1.class2	Elements with both classes
.c1 .c2	c2 is descendent of c1
element.class	All elements with that class
div p	All p that are inside that div (including nested)
div > p	Only the p that are immediate/direct child of that div. Nested p will not e included. Means the p whose direct parent is the div.
div + p	the first p after that div (has closed, completed). e.g: <div></div><p></p>
div ~ p	all p after that div (has closed, completed) e.g: <div></div><p></p><p></p>..<p></p>

Attribute Selectors

Selector	Example	Behavior
Presence: [attribute]	[lang]	Selects all elements with a lang attribute regardless of the value
Exact match: [attribute =value]	[lang="it"]	Selects all elements with lang="it"
Whitespace Separated: [attribute ~=value]	[tags ~= "red"]	Selects elements where the specified attribute's value is a list of whitespace-separated words, and one of those words is exactly flower. e.g:<div tags="red"></div> and <div tags="red green"></div> will be selected but <div tags="red-green blue"></div> will not be selected.
Hyphen Separated: [attribute	\=value	[lang
Prefix Match: [attribute ^=value]	[href ^= "https"]	Selects all elements with a href attribute value that begins with "https"
Suffix Match: [attribute $=value]	[href $= ".pdf"]	Selects all elements with a href attribute value ends with ".pdf"
Substring Match: [attribute =value*]	[tags *= "red"]	Selects all elements with a href attribute value containing the substring "test" e.g: <div tags="red">, <div tags="red green">, <div tags="red-green blue"> will all be selected

Combining Attribute Selectors

You can combine attribute selectors for more specific targeting:

<input type="text" data-validation="required email">
<input type="text" data-validation="required">
<input type="email" data-validation="email">

input[type="text"][data-validation*="required"] {
  border: 1px solid red; /* Selects the first two inputs */
}

Pseudo Classes:
A pseudo-class is used to define a special state of an element. Pseudo-classes are keywords added to selector. They allow you to apply styles when something happens, like when a user hovers over a link, or when an element is the first or last of its kind. They let you style an element based on its state or position in the document tree, rather than its content or attributes.

Selector	Example	Behavior
:first-child	p:first-child	Selects the p that is the first child of its parent. But it’s not like select the first <p> element inside parent rather only if the first child is <p>. e.g: <div><p></p><p></p></div> Here the first p will be selected. But <div><li></li><p></p></div>nothing will be selected here. Because the first child is <li>.
:first-of-type	p:first-of-type	Selects the first element of its type among a group of sibling elements.
:nth-child()	p:nth-child(2)	Selects any <p> element that is the second child of its parent.
:nth-last-child()	p:nth-last-child(2)	Selects any <p> element that is the second child of its parent, counting from the end.
:nth-of-type()	p:nth-of-type(2)	Selects any <p> element that is the second <p> element of its parent.
:nth-last-of-type()	p:nth-last-of-type(2)	Selects any <p> element that is the second <p> element of its parent, counting from the end.
:only-child	p:only-child	Selects any <p> element that is the only child of its parent. The parent has no other children.
:only-of-type	p:only-of-type	Selects any <p> element that is the only <p> element of its parent
:last-child	li:last-child	Selects any <li> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects any <p> elemet
:active	a:active	Selects the active link
:any-link	a:anylink	Selects any <a> or <area> element with an href attribute
:link	a:link	Selects any unvisited link
:visited	a:visited	Selects all visited links
:auto-fill	input:autofill	Selects any <input> element with its value autofilled by the browser
:checked	input:checked, option:checked	Matches any <input> or <option> element that is checked
:default	input:default, option:default	Selects form elements that are default in a group of related elements
:disabled	input:disabled, option:disabled	Selects any element that is disabled. Most used for form elements
:enabled	input:enabled	Selects any element that is enabled. Most used for form elements
:in-range	input:in-range	Select any <input> element with a value within the specified range limit
:out-of-range	input:out-of-range	Selects any <input> element with a value outside the specified range limit
:valid	input:valid	Selects all input elements with a valid value
:invalid	input:invalid	Selects invalid form elements
:user-invalid	:user-invalid	Selects any form element with an invalid value (after the user have interacted with it)
:user-valid	:user-valid	Selects any form element with a valid value (after the user have interacted with it)
:required	input:required	Selects input elements with the "required" attribute specified
:optional	input:optional, textarea:optional	Selects any <input>, <select>, or <textarea> elements without a "required" attribute
:placeholder-shown	input:placeholder-shown, textarea:placeholder-shown	Selects any <input> or <textarea> element that is currently displaying placeholder text
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects editable input elements
:empty	div:empty	Selects any element that has no children, completely empty, contains nothin on the DOM.
:root	:root	Selects the document's root element
:lang()	p:lang(it)	Selects any <p> element with a lang attribute equal to "it" (Italian)
:right	@page :right	Represents all right-hand pages of a printed document (used with the @page rule)
:left	@page :left	Represents all left-hand pages of a printed document (used with the @page rule)
:scope	:scope	Selects elements that are a reference point, or scope, for selectors to match against
:state()	:state()	Selects custom elements that have the specified custom state
:target	:target	Selects the target element. e.g: <div id=”abc”></div> is a target. You can go to the target by clicking <button href=”#abc”></button>
:target-within	:target-within	Matches elements which are the targets, but also elements which have a descendant which is the target of the document URL.
:not()	:not(p)	Selects any element that is not a <p> element
:modal	:modal	Selects the element that is in a modal state
:hover	a:hover	Selects element on mouse over
:focus	input:focus, select:focus	Selects the element that gets focus. Most used for form elements
:focus-visible	button:focus-visible	Selects the element that gets focus (used to apply focus styles only when the keyboard is used to focus something, not the mouse)
:focus-within	form:focus-within	Matches an element if the element or any of its descendants gets focus
:fullscreen	:fullscreen	Selects any element that is currently in full-screen mode. e.g: element.requestFullscreen() function invoked in JS to turn that element take fullscreen. That time that style will take effect.
:playing	:playing	Represents a playable element that is playing.
:paused	:paused	Represents a playable element that is paused.
:seeking	:seeking	A resource is considered to be seeking if the user has requested playback of a specific position in the media resource, but the media element has not yet reached that position. Seeking is different from :buffering in that the media element is not currently loading data, but is instead skipping to a new position in the media resource.
:buffering	:buffering	Represents a playable element that is playing but is temporarily stalled because it is downloading the media resource. That element cannot continue playing because it is trying to load media data but does not yet have enough data to begin or continue playback.
:stalled	:stalled	A resource is considered to be stalled if the user has requested playback of a specific position in the media resource, but it has failed to receive any data for some amount of time because it cannot download the media resource. This is different from :buffering where the media element is unexpectedly not loading data when stalled (e.g., due to a network error). Means, stall first then buffering may happen or not happen. But stall first then depends if the data has loaded or not. Like with the :buffering pseudo-class, the element is still considered to be "playing" when it is "stalled". If :stalled matches an element, :playing will also match that element.
:muted	:muted	Represents a sound-producing element that is muted.
:volume-locked	:volume-locked	Represents an element that is capable of making sound, such as <audio> or <video>, but the audio volume of the media element is currently "locked" by the user.
:is(), where(), has()		Check below.

Pseudo Elements:
A CSS pseudo-element is used to style specific parts of an element. They are not actual HTML elements, but they allow you to style parts of an element as if they were separate elements. They act as if you had added a whole new HTML element into the markup, rather than applying a class to existing elements.

Selector	Example	Behavior
::after	p::after	Inserts something after the content of the specified element
::before	p::before	Inserts something before the content of the specified element
::placeholder	input::placeholder	Styles the placeholder text of <input> element
::marker	::marker	Selects the markers of list items
::file-selector-button	::file-selector-button	Selects any button of type <input type="file">
::selection	::selection	Styles the user-selected text
::backdrop	dialog::backdrop	Styles the viewbox behind a dialog box or popover element
::spelling-error	::spelling-error	Styles a text that the browser has flagged as incorrectly spelled
::grammar-error	::grammar-error	Styles a text that the browser has flagged as grammatically incorrect
::-webkit-scrollbar	::-webkit-scrollbar { width: 10px; }	Selects the scrollbar of an element. This is a non-standard pseudo-element, and only works in WebKit-based browsers (Chrome, Safari).
::-webkit-scrollbar-track	::-webkit-scrollbar-track { background: #f1f1f1; }	Selects the track (the background) of the scrollbar.
::-webkit-scrollbar-thumb	::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; }	Selects the "thumb" (the draggable part) of the scrollbar.
::scroll-button()	::scroll-button(<scroll-button-direction>)	Represents a button for controlling the scrolling of a scroll container. They are generated on scroll containers when their content value is not none. The direction of the scrolling is determined by the parameter value.
::scroll-marker	::scroll-marker	Can be generated inside any element and represents its scroll marker. All elements can have a ::scroll-marker pseudo-element, , which is placed into the ::scroll-marker-group of the nearest scroll container ancestor. A scroll marker behaves like an anchor (<a> element) whose scroll target is the marker's originating element — and scrolls the scroll container to that element when activated.
::scroll-marker-group	::scroll-marker-group	This is a container that automatically contains any ::scroll-marker pseudo-elements generated on itself or its descendants. This allows them to be positioned and laid out as a group, and is typically used when creating a CSS carousel to provide a scroll position indicator. The individual scroll markers can be used to navigate to their associated content items.

CSS Selectors, Pseudo Classes and Elements

Attribute Selectors

:is(), :where(), :has() :

Subscribe to my newsletter

shohanur rahman

shohanur rahman