Core CSS

Selectors Table

CSS Selectors
Name Designation Application Description
Basic Selectors
Universal * {
    color: Green;
}		 <p>PV=nRT</p> This selects all elements. It is also the default when no selector is specified.
Class .equation {
    color: Green;
}		 <p class="equation">PV=nRT</p> This selects all elements with the specified class.
ID #GasLaw {
    color: Green;
}		 <p id="GasLaw">PV=nRT</p> This selects the elements with the specified id.
Type p {
    color: Green;
}		 <p >PV=nRT</p> This selects the elements of the specified type.
Attribute [href] {
    color: Green;
}		 <a href="http://xoax.net">XoaX.net</a> This selects the elements with the specified attribute present, regardless of the attribute's value.
Relational Selectors
Type1, Type2 h1, h2 {
    color: Green;
}		 <h1>The Bible</h1>
<h2>Genesis</h2>		 This selects all Type1 or Type2 elements.
Type1Type2 .c1.c2 {
    color: Green;
}		 <h1 class="c1 c2">The Bible</h1> This selects all Type1 and Type2 elements.
Type1 Type2 p em {
    color: Green;
}		 <p>The <em>Revised</em> Edition</p> This selects all Type2 elements that are inside a Type1 element.
Type1 > Type2 p > em {
    color: Green;
}		 <p>The <em>Revised</em> Edition</p> This selects all Type2 elements that have a Type1 parent.
Type1 + Type2 h1 + h2 {
    color: Green;
}		 <h1>The Bible</h1>
<h2>Genesis</h2>		 This selects all Type2 elements that immediately follow a Type1 element.
Type1 ~ Type2 h1 ~ p {
    color: Green;
}		 <h1>The Bible</h1>
<h2>Genesis</h2>
<p>In the beginning...</p>		 This selects all Type2 elements that are preceded a Type1 element.
:not(selector) :not(p) {
    color: Green;
}		 <h1>The Bible</h1> This selects the elements that have not been selected by the given selector selector.
Attribute Value Selectors
Type[Attrib] p[id] {
    color: Green;
}		 <p id="xoax">XoaX.net</p>
<p id="explorer">Columbus</p>		 This selects all elements of the type Type that have the attribute Attrib.
[Attrib=Value] [id=xoax] {
    color: Green;
}		 <p id="xoax">XoaX.net</p> This selects all elements that have the attribute Attrib set to the value Value.
Type[Attrib=Value] p[id=xoax] {
    color: Green;
}		 <p id="xoax">XoaX.net</p>
<p>Columbus</p>		 This selects all elements of the type Type that have the attribute Attrib set to the value Value.
[Attrib~=Value] [id~=xoax] {
    color: Green;
}		 <p id="the xoax url">http://xoax.net/</p> This selects all elements that have the attribute Attrib set to a value containing the space-separated word "Value".
[Attrib|=Value] [id|=xoax] {
    color: Green;
}		 <p id="xoax-url">http://xoax.net/</p> This selects all elements that have the attribute Attrib set to a hyphen-separate list of values starting with "Value".
[Attrib^=Value] [id^=xoax] {
    color: Green;
}		 <p id="xoax_url">http://xoax.net/</p> This selects all elements that have the attribute Attrib set to a value starting with the string "Value".
[Attrib$=Value] [id$=xoax] {
    color: Green;
}		 <p id="url_xoax">http://xoax.net/</p> This selects all elements that have the attribute Attrib set to a value ending with the string "Value".
[Attrib*=Value] [id*=xoax] {
    color: Green;
}		 <p id="the_xoax_url">http://xoax.net/</p> This selects all elements that have the attribute Attrib set to a value containing the substring "Value".
Parent-Child Relationship Selectors
:first-child :first-child {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are the first child of a parent element.
:last-child :last-child {
    color: Green;
}		 <p>Luke <b>2:7</b></p> This selects all elements that are the last child of a parent element.
:nth-child(an + b) :nth-child(1) {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are nth child of their their parent. The value can be any arithmetic sequence, like 3n+2.
:nth-last-child(an + b) :nth-last-child(1) {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are nth child from the last of their parent. The value can be any arithmetic sequence, like 3n+2.
:last-of-type :last-of-type {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are last of their type inside their parent.
:nth-of-type(an + b) :nth-of-type(1) {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are nth child of their type inside their parent. The value can be any arithmetic sequence, like 3n+2.
:nth-last-of-type(an + b) :nth-last-of-type(1) {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are nth child from the last of their type inside their parent. The value can be any arithmetic sequence, like 3n+2.
:only-of-type :only-of-type {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are the only child of their type inside their parent.
:only-child :only-child {
    color: Green;
}		 <p><b>Luke</b> 2:7</p> This selects all elements that are the only child inside their parent.
Conditional Selectors
:active :active {
    color: Green;
}		 <p>Luke 2:7</p> This selects the active element. We can put this together with a type like p:active to select only specific active tags.
:checked :checked {
    color: Green;
}		 <input type="radio" checked>John</input> This selects the elements that are checked for input elements that are radio buttons or checkboxes. This also works on selected option elements.
:disabled :disabled {
    color: Green;
}		 <input type="radio" disabled>John</input> This selects the elements that are disabled; it is typically used for input elements in a form.
:empty :empty {
    color: Green;
}		 <p></p> This selects the elements that are empty, excluding the normally empty elements like br, img, etc.
:enabled :enabled {
    color: Green;
}		 <input type="radio">John</input> This selects the elements that are not disabled; it is typically used for input elements in a form.
:focus :focus {
    color: Green;
}		 <p>Luke 2:7</p> This selects the element that has focus.
:hover :hover {
    color: Green;
}		 <p>Luke 2:7</p> This selects the element that has been hovered over.
:in-range :in-range {
    color: Green;
}		 <input type="number" min="1" max="5" value="3"> This selects the input element that has has its value in its range.
:invalid :invalid {
    color: Green;
}		 <input type="email" value="xoax"> This selects input elements that have invalid values.
:lang(language) :lang(en) {
    color: Green;
}		 <p lang="en">In the beginning...</p> This selects elements that have the lang attribute set to language.
:link :link {
    color: Green;
}		 <a href="http://xoax.net/">XoaX.net</a> This selects all unvisited links.
:optional :optional {
    color: Green;
}		 <input value="XoaX.net"> This selects all form elements that are not required.
:out-of-range :out-of-range {
    color: Green;
}		 <input type="number" min="1" max="5" value="8"> This selects the input elements that have their values outside of their range.
:read-only :read-only {
    color: Green;
}		 <input readonly value="XoaX.net"> This selects all form elements that are read only.
:read-write :read-write {
    color: Green;
}		 <input value="XoaX.net"> This selects all form elements that are not read only.
:required :required {
    color: Green;
}		 <input required> This selects all form elements that have a required attribute.
:root :root {
    color: Green;
}		 <html>Psalm 94:12-13</html> This selects the root element.
:target :target {
    color: Green;
}		 <a href="#xoax">Go to XoaX.net</a>
<p id="xoax">XoaX.net</p>		 This selects the element is the target of clicked link.
:valid :valid {
    color: Green;
}		 <input type="email" value="info@xoax.net"> This selects all form elements that have valid values.
:visited :visited {
    color: Green;
}		 <a href="http://xoax.net/">XoaX.net</a> This selects all visited links.
Content Selectors
::after ::after {
    content: ".net";
}		 <p>XoaX</p> Inserts content at the end of the specified element.
::before ::before {
    content: "XoaX";
}		 <p>.net</p> Inserts content at the beginning of the specified element.
::first-letter ::first-letter {
    color: Green;
}		 <p>XoaX.net</p> This selects and sets the style of the first letter of the specified element.
::first-line ::first-line {
    color: Green;
}		 <p>XoaX.net</p> This selects and sets the style of the first line of the specified element.
::selection ::selection {
    color: Green;
}		 <p>XoaX.net</p> This sets the style of the user-selected text of the specified element.
 
 

© 2007–2024 XoaX.net LLC. All rights reserved.