Select every <p> element who is the first child of its parent - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:first-child

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. first-child

Description

Select every <p> element who is the first child of its parent

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {<!--   w  ww  . ja v a 2s .c o  m-->
    background-color: red;
}
</style>
</head>
<body>

<p>This paragraph is the first child of its parent (body).</p>

<h1>Welcome</h1>
<p>This paragraph is not the first child of its parent.</p>

<div>
  <p>This paragraph is the first child of its parent (div).</p>
  <p>This paragraph is not the first child of its parent.</p>
</div>

</body>
</html>

Related Tutorials