CSS Selectors

css-selectors.scss

**.class**	.intro	
/* Selects all elements with class="intro" */

**.class1.class2**	.name1.name2	
/* Selects all elements with both name1 and name2 set within its class attribute */

**.class1 .class2**	.name1 .name2	
/* 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.class**	p.intro	
/* Selects all <p> elements with class="intro" */

**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 the first <p> element that is placed immediately after <div> elements */

**element1 ~ element2**	p ~ ul	
/* Selects every <ul> element that is 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 equal to "en" or 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 */

**:fullscreen**	:fullscreen	
/* Selects the element that is in full-screen mode */

**: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 */

**::marker**	::marker	
/* Selects the markers of list items */

**: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 the "placeholder" attribute specified */

**: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 */