:header JQ Home  <<  Selectors  <<  :header

• <<    :gt() Selector
• :lang Selector     >>

Header element selector.

Shorthand version $(':header')

Description

The :header selector, selects all header elements.

• Being a jQuery extension the :header pseudo selector is not part of any current CSS specification. Therefore :header cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.
• If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the examples below to narrow the search and improve performance.

Syntax

Parameters

None.

Return

N/A.

:header Examples Selectors  <<  Top

Selects all header elements.

In the example below we apply an orange background to all header elements within the '.content' division of the page.

$(function(){

  $('#btn1').on('click', function() {
    $(".content :header").css('backgroundColor', 'orange');
  });

});

Selects all header elements.

In the example below we apply an yellow background to all header elements within the '#sidebarleft' division of the page.

$(function(){

  $('#btn2').on('click', function() {
    $("#sidebarleft :header").css('backgroundColor', 'yellow');
  });

});

Related Tutorials

jQuery Basic Tutorials - Lesson 4 - jQuery Selectors

• <<    :gt() Selector
• :lang Selector     >>