Categories
Web development

CSS Pseudo-classes

CSS pseudo-classes

The CSS pseudo-class is used to define a special state of an HTML element.

Syntax:

selector:pseudo-class {
  property: value;
}

You can use CSS pseudo-classes to display links differently. To style the links depending on their state use the following pseudo-classes:

a:link – selects the unvisited links.

a:visited – selects the visited links.

a:hover – selects links on mouseover.

a:active – selects the active links (a link the moment it is clicked)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: #2a9d8f;
}

a:visited {
  color: #264653;
}

a:hover {
  color: #e76f51;
}

a:active {
  color: #e9c46a;
}
</style>
</head>
<body>

<p><a href="https://lenadesign.org/" target="_blank">This is a link.</a></p>

</body>
</html>

Output:

You can you the CSS pseudo-classes to match elements in a specific order:

p:empty – selects every <p> element that has no children.

p:first-child – selects every <p> elements that is the first element (child) of its container (parent).

p:first-of-type – selects every <p> element that is the first
element of its container (parent).

:not(p) – selects every element that is not a <p> element.

p:nth-child(2) – selects every <p> element that is the second element (child) of its container (parent).

p:nth-last-child(2) – selects every <p> element that is the second element(child) of its container (parent), counting from the last <p>
element (child).

p:nth-last-of-type(2) – selects every <p> element that is the second
<p> element of its container (parent), counting from the last <p>
element (child).

p:nth-of-type(2) – selects every <p> element that is the second
<p> element of its container (parent).

p:only-of-type – selects every <p> element that is the only
<p> element of its container (parent).

p:only-child – selects every <p> element that is the only element (child) of its container (parent).

Example:

<!doctype html>
<html>
<head>
<style>
.example-1 p:first-of-type {
        color: #2a9d8f;
    }
</style>
</head>

<body>
<div class="example-1">
 <h4>Example:</h4>
 <p>This is the first paragraph.</p>
 <p>This is the second paragraph.</p>
 <p>This is the third paragraph.</p>
</div>
</body>
</html>

Output:

Example:

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.


You can you the CSS pseudo-classes to match the form elements:

input:checked – selects every checked <input> element.

input:disabled – selects every disabled <input> element.

input:enabled – selects every enabled <input> element.

input:focus – selects the <input> element that has focus.

input:in-range – selects <input> elements according defined range.

input:invalid – selects every <input> element with an invalid value.

input:optional – selects every <input> element with no “required” attribute.

input:out-of-range – selects every <input> element with a value outside a defined range.

input:read-only – selects every <input> element with a “read-only” attribute defined.

input:read-write – Select every <input> element with no “read-only” attribute.

input:required – Selects every <input> element with a “required” attribute defined.

input:valid – selects every <input> element with a valid value.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
option:checked {
  height: 150px;
  width: 150px;
}
</style>
</head>
<body>

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="jQ">jQuery</option>
</select>

</body>
</html>

Output:

The CSS :lang pseudo-class allows to specify the special rules for different languages:

Example:

Select and style every <p> element with a lang attribute value equal to “es” (Spanish):

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(es) { 
  color: #e76f51;
  font-weight: bold;
}
</style>
</head>
<body>

<p>Hello from Spain!.</p>
<p lang="es">Holla Todos!</p>

</body>
</html>

Output:

Hello from Spain!.

Holla Todos!


Note: The lang attribute value is most often a two-letter language code, like lang=”es” (for Spanish), lang=”it” (for Italian), lang=”fr” (for French), or two language codes combined, like lang=”fr-ca” (for Canadian French).

The CSS :root pseudo-class matches the document’s root element (<html> element):

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
:root {
  background-color: #2a9d8f;
  padding: 20px;
}

body {
  background-color: #e9c46a;
  padding: 20px;
}
</style>
</head>
<body>

<div class="example">
<h4>This is a heading.</h4>
</div>
</body>
</html>

Output:

The CSS :target pseudo-class can be used to style the currently active target element:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
:target {
  border: 2px solid #2a9d8f;
  background-color: #e9c46a;
}
</style>
</head>
<body>

<div class="example">
<p><a href="#">Go to Content 1</a></p>
<p><a href="#">Go to Content 2</a></p>

<p id="news1"><b>Content 1...</b></p>
<p id="news2"><b>Content 2...</b></p>
</div>
</body>
</html>

Output:

Go to Content 1

Go to Content 2

Content 1…

Content 2…

Enjoy coding!

Read also:

CSS Selectors

CSS Reference

Categories
Web development

CSS :optional & :required Selectors

CSS :optional and :required selectors

CSS :optional selector

The CSS :optional selector matches form elements that are optional.

Syntax:

:optional {
  CSS declarations;
} 

CSS :required selector

The CSS :required selector matches form elements that are required.

Syntax:

:required {
  CSS declarations;
}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:optional {
  background-color: #e9c46a;
}
    
input:required {
  background-color: #f4a261;
}
</style>
</head>
<body>

<p>An optional input element:<br><input></p>

<p>A required input element:<br><input required></p>


</body>
</html>

Output:

An optional input element:

A required input element:

Note: The CSS :optional and :required selectors only applies to the form elements like <input>, <select>, and <textarea>.

Enjoy coding!

Read also:

CSS :hover and :active selectors

CSS :focus & :focus-within Selectors

Categories
Web development

CSS :focus & :focus-within Selectors

CSS :focus and :focus-within selectors

CSS :focus selector

The CSS :focus selector is used to match the element that has focus.

Syntax:

:focus {
  CSS declarations;
} 

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: #2a9d8f;
}
</style>
</head>
<body>

<p>Click inside the text fields to change the background to green:</p>

<form>
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname">
</form>

</body>
</html>

Output:

Click inside the text fields to change the background to green:

Name:
Surname:

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 150px; 
  transition: width .35s;
}
input[type=text]:focus {
  width: 250px;
  background-color: #e9c46a;
}
</style>
</head>
<body>

Example: <input type="text" name="search">

</body>
</html>

Output:

Example:

CSS :focus-within selector

The CSS :focus-within selector matches an element if that element contains any children that have :focus.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

form {
  border: 2px solid #333;
  padding: 25px;
  transition: background 0.35s;
  width:30%;
  text-align: center;
}
form:focus-within {
  background-color: #e9c46a;
}
</style>
</head>
<body>

<form>
  <label for="name">First name</label>
  <input type="text" name="name" />
  </br>
   <label for="surname">Last name</label>
  <input type="text" name="surname" />
</form>

</body>
</html>

Output:


Enjoy coding!

Read also:

CSS :valid & :invalid Selectors

CSS :first-of-type Selector

CSS :hover and :active selectors

Categories
Web development

CSS :read-write & :read-only Selectors

CSS :read-write and :read-only Selectors

CSS :read-write selector

The CSS :read-write selector matches form elements that are “readable” and “write-able”.

Form elements with no “read-only” attribute and non “disabled” attribute are specified as “read-” and “write-able”.

Syntax:

:read-write {
  CSS declarations;
}

CSS :read-only selector

The CSS :read-only selector matches elements that are “read-only”.

Form elements with a “read-only” attribute are specified as “read-only” (You can not input any new data).

Syntax:

:read-only {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
  background-color: #e9c46a;
}
    
input:read-only {
  background-color: #f4a261;
}
</style>
</head>
<body>

<p>:read-write selector:<br><input value="text"></p>

<p>:read-only selector:<br><input readonly value="text"></p>

</body>
</html>

Output:

:read-write selector:

:read-only selector:


Enjoy coding!

Read also:

CSS :valid & :invalid Selectors

CSS :nth-last-child() & :last-of-type() Selectors

Categories
Web development

CSS :checked Selector

CSS :checked selector

The CSS :checked selector selects all checked elements like radio buttons, checkboxes, and <option> element.

Example1:

Changing the width and height for every checked element (for radio buttons, checkboxes):

<!DOCTYPE html>
<html>
<head>
<style> 
input:checked {
  height: 45px;
  width: 45px;
}
</style>
</head>
<body>

<form action="">
  <input type="radio" checked="checked" value="black" name="colours">Black<br>
  <input type="radio" value="white" name="colours">White<br>
  <input type="checkbox" checked="checked" value="dog"> I have a dog.<br>
  <input type="checkbox" value="cat"> I have a cat. 
</form>

</body>
</html>

Output:

Black
White
I have a dog.
I have a cat.


Example2:

Changing the width and height for every checked element (for the <option> element):

<!DOCTYPE html>
<html>
<head>
<style> 
option:checked {
  height: 150px;
  width: 150px;
}
</style>
</head>
<body>

<select>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="jQ">jQuery</option>
</select>

</body>
</html>

Output:

Enjoy coding!

Categories
Web development

CSS :in-range & :out-of-range Selectors

CSS :in-range and :out-of-range selectors

CSS :in-range selector

The CSS :in-range selector matches every element with a value that is within a defined range.

Syntax:

 :in-range {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
  border: 3px solid #2a9d8f;
}
</style>
</head>
<body>

<input type="number" min="5" max="10" value="7">

<p>Type a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>

</body>
</html>

Output:

Type a number out of range (less than 5 or higher than 10), to see the styling disappear.

CSS :out-of-range selector

The CSS :out-of-range selector matches every element with a value that is outside a defined range.

Syntax:

:out-of-range {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
  border: 3px solid #e76f51;
}
</style>
</head>
<body>

<input type="number" min="5" max="10" value="17">

<p>Type a number within the given range (between 5 and 10), to see the styling disappear.</p>

</body>
</html>

Output:

Type a number within the given range (between 5 and 10), to see the styling disappear.

Note: The CSS :in-range and :out-of-range selectors only work for input elements with min/ max attributes.

Enjoy coding!

Read also:

CSS :empty Selector

CSS :checked Selector

CSS :not Selector

Categories
Web development

CSS :valid & :invalid Selectors

CSS :valid and :invalid selectors

CSS :valid selector

The CSS :valid selector defines form element with a value that validates according to the element’s settings.

Syntax:

:valid {
  CSS declarations;
} 

CSS :invalid selector

The CSS :invalid selector defines form elements with a value that does not validate according to the element’s settings.

Syntax:

 :invalid {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
  background-color: #e9c46a;
}
    
input:invalid {
  border: 2px solid #e76f51;
}
</style>
</head>
<body>

<h4>:valid selector:</h4>

<input type="email" value="example@example.com">
    
<p>Try to type a not valid e-mail address, to see the styling disappear.</p>
</br>
    
<h4>:invalid selector:</h4>
<input type="email" value="exampleEmail">

<p>Try to type a valid e-mail address, to see the styling disappear.</p>


</body>
</html>

Output:

:valid selector:

Try to type a not valid e-mail address, to see the styling disappear.


:invalid selector:

Try to type a valid e-mail address, to see the styling disappear.

>

Note: The CSS :valid and :invalid selectors only work for form elements such as input elements.

Enjoy coding!

Categories
Web development

CSS :not Selector

CSS :not selector

CSS :not selector

The CSS :not selector selects every element that is not the specified element.

Syntax:

:not(selector) {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h4 {
  color: #2a9d8f;
}

:not(h4) {
  color: #e76f51;
  font-weight: bold;
}
</style>
</head>
<body>

<h4>This is a heading.</h4>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h4>This is another heading.</h4>
<div>This is some text in a div element.</div>

</body>
</html>

Output:

This is a heading.

This is a paragraph.

This is another paragraph.

This is another heading.

This is some text in a div element.

Enjoy coding!

Categories
Web development

CSS :enabled & :disabled Selectors

CSS :enabled and :disabled selectors

The CSS :enabled selector selects every enabled element (frequently used on form elements).

Syntax:

:enabled {
  CSS declarations;
} 

The CSS :disabled selector selects every disabled element (frequently used on form elements). You can not insert any additional data into the form.

Syntax:

:disabled {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {
  background: #e9c46a;
}

input[type=text]:disabled {
  background: #dddddd;
}
</style>
</head>
<body>

<form action="">
  First name: <input type="text" value="John"><br>
  Last name: <input type="text" value="Doe"><br>
  Occupation: <input type="text" disabled="disabled" value="Web Developer">
</form>

</body>
</html>

Output:

First name:
Last name:
Occupation:

Enjoy coding!

Categories
Web development

CSS :empty Selector

CSS :empty selector

CSS :empty selector

The CSS :empty selector selects every element that has no children.

Syntax:

:empty {
  CSS declarations;
} 

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
div:empty {
  width: 220px;
  height: 20px;
  background-color: #2a9d8f;
}
</style>
</head>
<body>

<div></div>
<div>This is some text in a div element.</div>
<div>This is some text in a div element.</div>

</body>
</html>

Output:

This is some text in a div element.
This is some text in a div element.

Enjoy coding!