select elements by type, class, and/or ID : Selector priority « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Selector priority

select elements by type, class, and/or ID

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {
  border: 2px solid black;
}

* .my-class1 {
  padding: 10px;
}

* .my-class2 {
  letter-spacing: 0.11em;
}

#my-id {
  background-color: #ccc;
}
</style>
</head>
<body> 

<h1>Type, Class, and ID Selectors</h1> 
<p>The type selector, <code>p</code>, adds a border to all paragraphs.</p> 
<p class="my-class1"> 

The class selector, <code>*.my-class1</code>, adds padding.</p> 

<p class="my-class1 my-class2"> 

The class selector, <code>*.my-class2</code>, adds letter-spacing.</p> 

<p class="my-class1 my-class2" id="my-id"> 

The ID selector, <code>#my-id</code>, adds a background color. </p> 
</body> 
</html>








Related examples in the same category

1.Selectors choose the element to apply formatting to
2.Six selector groups listed from highest to lowest priority:
3.Specificity means that more specific selectors are given priority over less specific selectors
4.Style is overwritable
5.Cascade Order
6.Specificity, !important
7.!important has higher priority
8.Latter one overwrite the former one
9.the id selector is more specific than the element selector
10.Some properties in CSS are inherited to children elements