Set style for direct child : Child Selector « Style Basics « HTML / CSS






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

Set style for direct child

 
<html>
 <head>
  <title>Set style for direct child</title>
<style type="text/css">
p > strong {
  text-decoration: underline;
} 
</style>
<body>
<div>
 <p>Nothing happens to this part of the sentence because this 
<strong>strong</strong> isn't the direct child of div.</p> 
 However, this <strong>strong</strong> is the child of div. 
Therefore, it receives the style dictated in the CSS rule.
</div>
<body>








Related examples in the same category

1.Child Selector Demo
2.Direct Child Selectors
3.Apply styles to label elements, but only if they appear inside of an input form
4.Use > to mark a direct relationship