Universal Selector in CSS

CSS Web Development Front End Technology

The CSS * selector is a universal selector which is used to select all elements of the HTML DOM. If you want to set a similar style for the entire document, then use the Universal selector.

Syntax

The syntax for CSS universal selector is as follows: Place the styles you want to set for the entire HTML document −

* {
   /*declarations*/
}

The following examples illustrate CSS universal selector −

Set the margins and padding for the document

To set the margins and padding settings for all the elements on the web page, set it under the Universal Selector −

* {
   padding: 2px;
   margin:5px;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <title>Custom Cursor Using CSS</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
         margin:5px;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      #tech1 {
         cursor: pointer;
      }
      #tech2 {
         cursor: pointer;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>Custom Cursor Using CSS</legend>
         <h1>Learn</h1>
         <input type="button" id="tech1" value="DBMS">
         <input type="button" id="tech2" value="Python">
      </fieldset>
   </form>
</body>
</html>

Set the box sizing with the Universal Selector

We have used the Universal Selector and set the box-sizing property. The box-sizing is set with the value border-box; so that the padding and border are included in the width and height −

* {
   box-sizing: border-box;
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         box-sizing: border-box;
      }
      input {
         width: 100%;
         padding: 12px;
         margin-top: 6px;
         margin-bottom: 16px;
      }
      input[type="submit"] {
         background-color: rgb(69, 27, 117);
         color: white;
         font-weight: bold;
         font-size: 20px;
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      form {
         padding: 20px;
      }
      #checksField {
         display: none;
         background: #f1f1f1;
         color: #000;
         position: relative;
         padding: 20px;
         margin-top: 10px;
      }
      #checksField p {
         padding: 10px 35px;
         font-size: 18px;
      }
      .correct {
         color: green;
      }
      .correct:before {
         position: relative;
         left: -35px;
         content: "✔";
      }
      .wrong {
         color: red;
      }
      .wrong:before {
         position: relative;
         left: -35px;
         content: "✖";
      }
   </style>
</head>
<body>
   <h1 style="text-align: center;">Password Validation Example</h1>
   <form>
      <label for="uname">Username</label>
      <input type="text" id="uname" name="uname" required />
      <label for="pass">Password</label>
      <input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required/>
      <input type="submit" value="Submit" />
   </form>
   <div id="checksField">
      <h3>Password must contain the following:</h3>
      <p id="letter" class="wrong">A <b>lowercase</b> letter</p>
      <p id="capital" class="wrong">A <b>capital (uppercase)</b>letter</p>
      <p id="number" class="wrong">A <b>number</b></p>
   </div>
   <script>
      var myInput = document.getElementById("pass");
      var letter = document.getElementById("letter");
      var capital = document.getElementById("capital");
      var number = document.getElementById("number");
      myInput.onfocus = function() {
         document.getElementById("checksField").style.display = "block";
      };
      myInput.onblur = function() {
         document.getElementById("checksField").style.display = "none";
      };
      myInput.onkeyup = function() {
         var lowerCaseLetters = /[a-z]/g;
         if (myInput.value.match(lowerCaseLetters)) {
            letter.classList.remove("wrong");
            letter.classList.add("correct");
         } else {
            letter.classList.remove("correct");
            letter.classList.add("wrong");
         }
         var upperCaseLetters = /[A-Z]/g;
         if (myInput.value.match(upperCaseLetters)) {
            capital.classList.remove("wrong");
            capital.classList.add("correct");
         } else {
            capital.classList.remove("correct");
            capital.classList.add("wrong");
         }
         var numbers = /[0-9]/g;
         if (myInput.value.match(numbers)) {
            number.classList.remove("wrong");
            number.classList.add("correct");
         } else {
            number.classList.remove("correct");
            number.classList.add("wrong");
         }
      };
   </script>
</body>
</html>

Set the font for the document

Use the universal selector to select a similar font for all the elements set on the web page −

* {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

Example

Here is the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      * {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
   </style>
</head>
<body>
   <h1>Tutorials</h1>
   <h2>Text Tutorial</h2>
   <p>This includes the text library.</p>
   <h2>Video Tutorial</h2>
   <p>This includes the video lectures.</p>
</body>
</html>

AmitDiwan

Updated on: 02-Jan-2024

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started