Revision:
The ::after selector inserts something after the content of each selected element(s). Use the content property to specify the content to insert.
Use the ::before selector to insert something before the content.
Syntax: ::after {css declarations;}
My name is Emerald
I live in Paradise
<style>
p.special::after { content: " - remember this"; background-color:yellow;}
</style>
<div>
<p class="spec special">My name is Emerald</p>
<p class="spec special">I live in Paradise</p>
</div>
The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert.
Use the ::after selector to insert something after the content.
Syntax: ::before {css declarations;}
My name is Emerald
I live in Paradise
<style>
p.new::before {content: "Don't forget -"; background-color: orange; color: blue; font-weight: bold;}
</style>
<div>
<p class="spec new">My name is Emerald</p>
<p class="spec new">I live in Paradise</p>
</div>
The :default selector selects the default form element in a group of related elements. The :default selector can only be used on <button>, <input type="checkbox">, <input type="radio">, and <option> elements.
Syntax: :default {css declarations;}
The "male" radio button is checked by default:
<style>
input.again:default {box-shadow: 0 0 1px 1px red;}
</style>
<div>
<p class="spec">The "male" radio button is checked by default:</p>
<form style="margin-left: 2vw;" action="">
<input class="again" type="radio" name="gender" value="male" checked> Male<br>
<input class="again" type="radio" name="gender" value="female"> Female<br>
<input class="again" type="radio" name="gender" value="other"> Other
</form>
</div>
The ::first-letter selector is used to add a style to the first letter of the specified selector.
The following properties can be used with ::first-letter: font properties, color properties, background properties, margin properties, padding properties, border properties, text-decoration, vertical-align (only if float is 'none'), text-transform, line-height, float, clear.
The ::first-letter selector can only be used with block-level elements.
Syntax: ::first-letter {CSS declarations}
My name is Erwin.
I live in Ieper.
My best friend is Harry.
<style>
.special > p.one::first-letter {font-size: 200%; color: #8A2BE2;}
</style>
<div class="special">
<p class="spec one">My name is Erwin.</p>
<p class="spec one">I live in Ieper.</p>
<p class="spec one">My best friend is Harry.</p>
</div>
The ::first-line selector is used to add a style to the first line of the specified selector.
The following properties can be used with ::first-line: font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.
The ::first-line selector can only be used with block-level elements.
Syntax: ::first-line {CSS declarations}
To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.
<style>
p.two::first-line {background-color: lightcyan;}
</style>
<div>
<p class="spec two">To stop the degradation of the planet's natural
environment and to build a future in which humans live in harmony with nature,
by; conserving the world's biological diversity, ensuring that the use of
renewable natural resources is sustainable, and promoting the reduction of
pollution and wasteful consumption.</p>
</div>
The :fullscreen selector is used to select the element(s) that is in full-screen mode.
Syntax: :fullscreen {CSS declarations}
Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.
<style>
/* Safari syntax */
:-webkit-full-screen {background-color: red;}
/* IE11 syntax */
:-ms-fullscreen {background-color: red;}
/* Standard syntax */
:fullscreen {background-color: red;}
/* Style the button */
button {padding: 1vw; font-size: 1vw;}
</style>
<div>
<p class="spec">Click on the "Open Fullscreen" button to open this page in
fullscreen mode. Close it by either clicking the "Esc" key on your keyboard,
or with the "Close Fullscreen" button.</p>
<button style="margin-left:2vw;" onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
</div>
The :indeterminate selector selects form elements that are in an indeterminate state. The :indeterminate selector can only be used on <input type="checkbox>, <input type="radio">, and <progress> elements.
Checkboxes cannot be indeterminate with HTML - it is a property of the checkbox object, which can be set to true by JavaScript.
Radio buttons are indeterminate when all radio buttons with the same name value in the form are unchecked.
Syntax: :indeterminate {CSS declarations}
The checkbox below is in an indeterminate state (by JavaScript). If you click on it, it will change its state to "checked", and lose its red shadow color, as it is no longer indeterminate.
Note that an indeterminate checkbox has a "-" icon, rather than a checkmark or an empty box.
Checkbox
<style>
input:indeterminate {box-shadow: 0 0 1px 1px red;}
</style>
<div>
<p class="spec">The checkbox below is in an indeterminate state (by JavaScript).
If you click on it, it will change its state to "checked", and lose its red
shadow color, as it is no longer indeterminate.</p>
<p class="spec">Note that an indeterminate checkbox has a "-" icon,
rather than a checkmark or an empty box.</p>
<input style="margin-left:2vw;" type="checkbox" id="myCheckbox"> Checkbox
</div>
<script>
// Make the checkbox indeterminate via JavaScript
var checkbox = document.getElementById("myCheckbox");
checkbox.indeterminate = true;
</script>
The :invalid selector selects form elements with a value that does not validate according to the element's settings.
The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.
Use the :valid selector to select form elements with a value that validates according to the element's settings.
Syntax: :invalid {CSS declarations}
Try typing a legal e-mail address, to see the styling disappear.
<style>
input:invalid { border: 1vw solid red;}
</style>
<div>
<input style="margin-left:2vw;" type="email" value="supportEmail">
<p class="spec">Try typing a legal e-mail address, to see the styling disappear.</p>
</div>
The :marker selector selects the marker of a list item. This selector works on any element set to "display:list-item".
Syntax: ::marker {CSS declarations}
<style>
::marker:not(summary) {color: red; font-size: 2vw;}
</style>
<div>
<ul style="margin-left:2vw;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol style="margin-left:2vw;"">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</div>
The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.
Tip: the default color of the placeholder text is light grey in most browsers.
Syntax: ::placeholder {CSS declarations}
<style>
::-webkit-input-placeholder { /* Edge */ color: red;}
:-ms-input-placeholder { /* Internet Explorer */ color: red;}
::placeholder {color: red;}
</style>
<div>
<input style="margin-left:2vw;" type="text" name="fname" placeholder="First name">
</div>
The ::selection selector matches the portion of an element that is selected by a user. Only a few CSS properties can be applied to the ::selection selector: color, background, cursor, and outline.
Syntax: ::selection {CSS declarations}
This is a paragraph.
<style>
::selection {color: red;background: yellow;}
</style>
<div>
<h3>Select some text here below:</h3>
<p class="spec seventeen">This is a paragraph.</p>
<div style="margin-left:2vw" class="seventeen">This is some text in a div element.</div>
</div>