Attribute Selector

In this example below you will see how to do a Attribute Selector with some HTML / CSS and Javascript

This awesome code was written by chungc4, you can see more from this user in the personal repository.
You can find the original code on
Copyright chungc4 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Attribute Selector</title>
      <link rel="stylesheet" href="css/style.css">




<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>


<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>




/*Downloaded from */
div p{
  background-color: green;
/*  descendant selector  */
div > p{
  background-color: yellow;
/*  Child selector  */
div + p{
  background-color: blue;
/*  Adjacent Sibling  */
div ~ p{
  background-color: red;
/*  General Sibling  */