jQuery: Find all inputs that are descendants of a form and mark them with a dotted red border

Last update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

jQuery Fundamental - II : Exercise-77

Find all inputs that are descendants of a form and mark them with a dotted red border. Give a green background to inputs that are descendants of a fieldset that is a descendant of a form.

Note: Descendant Selector (“ancestor descendant”) selects all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

Sample solution :

HTML Code :

<!DOCTYPE html>
  <html>
  <head>
  <script src="https://code.jquery.com/jquery-git.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Find  all inputs that are descendants of a form  and mark them with a dotted red border. </title>
  </head>
  <body>
  <form>
<label for="name">Child of form:</label>
  <input name="name" id="name">
  <fieldset>
  <label for="newsletter">Grandchild of form, child of fieldset:</label>
  <input name="newsletter" id="newsletter">
  </fieldset>
  </form>
  Sibling to form: <input name="none">
  </body>
  </html>

CSS Code :

form {
border: 2px blue solid;
padding: 2px;
margin: 0;
background: #efe;
}
div {
color: red;
}
fieldset {
margin: 1px;
padding: 3px;
}

JavaScript Code :

$( "form input" ).css( "border", "2px dotted red" );
$( "form fieldset input" ).css( "backgroundColor", "green" );

See the Pen jquery-fundamental-exercise-77 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: End a custom queue function using dequeue which allows the queue to keep going.
Next: Remove all paragraphs from the DOM.