Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

W3.JS Selectors


W3.JS Selectors

W3.JS selects HTML elements and perform actions on the selected element(s):

w3.action(selector)
  • The action() is performed on the selected element(s)
  • The (selector) selects the HTML element(s)

Example

w3.hide('p')  // Hide all <p> elements

Try It Yourself » With CSS »

Are you familiar with CSS selectors?

W3.JS uses the CSS syntax to select and manipulate HTML elements.

Selectors are used to "find" (select) HTML elements based on their tag name, id, classes, types, attributes, values of attributes and much more. A list of all selectors can be found in our CSS Selector Reference.


Selector Examples

To select HTML elements, use a tag name:

Hide all <h2> elements:

w3.hide('h2')

Try It Yourself »

To select an element with a specific id, write a hash character, followed by the id of the HTML element:

Hide an element with id="London":

w3.hide('#London')

Try It Yourself »

To select elements with a specific class, write a period character, followed by the name of the class:

Hide all elements with class="city":

w3.hide('.city')

Try It Yourself »


More Selector Examples

Selector Description Example
("*") Selects all elements in the document Try it
(this) Selects the current HTML element Try it
("p.intro") Selects all <p> elements with class="intro" Try it
("div p") Selects all <p> element inside all <div> elements Try it
("div p:first-child") Selects the first <p> element inside all <div> elements Try it
("[href]") Selects all elements with an href attribute Try it
("a[target=_blank]") Selects all <a> elements with a target attribute value equal to "_blank" Try it
("p:nth-child(even)") Selects all even <p> elements Try it

For a complete reference of all CSS selectors, please go to our CSS Selectors Reference.