Tutorial by Examples

Overview Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value. Selector(1)Matched elementSelects elements...CSS Version[attr]<div attr>With attribute a...

Overview SelectorDescriptiondiv spanDescendant selector (all <span>s that are descendants of a <div>)div > spanChild selector (all <span>s that are a direct child of a <div>)a ~ spanGeneral Sibling selector (all <span>s that are siblings after an <a>)a + spanA...

The class name selector select all elements with the targeted class name. For example, the class name .warning would select the following <div> element: <div class="warning"> <p>This would be some warning copy.</p> </div> You can also combine class n...

ID selectors select DOM elements with the targeted ID. To select an element by a specific ID in CSS, the # prefix is used. For example, the following HTML div element… <div id="exampleID"> <p>Example</p> </div> …can be selected by #exampleID in CSS as sho...

Pseudo-classes are keywords which allow selection based on information that lies outside of the document tree or that cannot be expressed by other selectors or combinators. This information can be associated to a certain state (state and dynamic pseudo-classes), to locations (structural and target p...

SelectorDescription*Universal selector (all elements)divTag selector (all <div> elements).blueClass selector (all elements with class blue).blue.redAll elements with class blue and red (a type of Compound selector)#headlineID selector (the element with "id" attribute set to headline)...

HTML <input type="range"></input> CSS EffectPseudo SelectorThumbinput[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb, input[type=range]::-ms-thumbTrackinput[type=range]::-webkit-slider-runnable-track, input[type=range]::-moz-range-track, input[type=...

With the ~ selector, you can easily implement a global accessible boolean without using JavaScript. Add boolean as a checkbox To the very beginning of your document, add as much booleans as you want with a unique id and the hidden attribute set: <input type="checkbox" id="sideba...

<style> input:in-range { border: 1px solid blue; } </style> <input type="number" min="10" max="20" value="15"> <p>The border for this value will be blue</p> The :in-range CSS pseudo-class matches when an element...

"The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n" - MDN :nth-child pseudo-selector12345678910:first-child✔:nth-child(3)✔:nth-child(n+3)✔✔✔✔✔✔✔✔:nth-child(3n)✔✔✔:nth-child(3n+1)...

This trick helps you select an element using the ID as a value for an attribute selector to avoid the high specificity of the ID selector. HTML: <div id="element">...</div> CSS #element { ... } /* High specificity will override many selectors */ [id="element&quo...

A. The syntax is presented above. The following selector matches all <input> elements in an HTML document that are not disabled and don't have the class .example: HTML: <form> Phone: <input type="tel" class="example"> E-mail: <input type="em...

The :only-child CSS pseudo-class represents any element which is the only child of its parent. HTML: <div> <p>This paragraph is the only child of the div, it will have the color blue</p> </div> <div> <p>This paragraph is one of the two children of the ...

The :last-of-type selects the element that is the last child, of a particular type, of its parent. In the example below, the css selects the last paragraph and the last heading h1. p:last-of-type { background: #C5CAE9; } h1:last-of-type { background: #CDDC39; } <div class="c...