Element Type Selector in CSS


The CSS element type selector is used to select all elements of a type. The syntax for CSS element type selector is as follows −

Syntax

The following is the syntax −

element {
   /*declarations*/
}

Element Type Selector for all <li> elements

In this example, we have set the same style i.e., list-style none for all the <li> elements. The following examples illustrate CSS element type selector −

li {
   list-style: none;
   margin: 5px;
   border-bottom-style: dotted;
}

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      li {
         list-style: none;
         margin: 5px;
         border-bottom-style: dotted;
      }
      div {
         box-shadow: inset 0 0 8px plum;
         padding: 36px;
      }
   </style>
</head>
<body>
   <div>
      <pre> \(╪)(╪) /</pre>
      <ul>
         <li></li>
         <li></li>
      </ul>
   </div>
</body>
</html>

Element Type Selector for all <li> elements in <ul> and <ol>

In this example, we have set the same style for all the <li> elements −

li {
   text-align: center;
   list-style: none;
   margin: 5px;
   padding: 5px;
   box-shadow: inset 0 0 15px yellowgreen;
}

Example

Let us now see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      li {
         text-align: center;
         list-style: none;
         margin: 5px;
         padding: 5px;
         box-shadow: inset 0 0 15px yellowgreen;
      }
      div {
         box-shadow: inset 0 0 8px orange;
         padding: 36px;
         width: 30%;
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <div>
      <ul>
         <li>Hello</li>
         <li>Guys</li>
      </ul>
   </div>
</body>
</html>

Updated on: 01-Nov-2023

527 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements