:headerS2C Home « Selectors « :header
Header element selector.
Shorthand version $(':header')
Description
The :header selector, selects all header elements.
- Being a jQuery extension the
:headerpseudo selector is not part of any current CSS specification. Therefore:headercannot take advantage of the performance boost provided by the native DOMquerySelectorAll()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
| Signature | Description |
|---|---|
jQuery(':header') | Header element match |
Parameters
None.
Return
N/A.
:header ExampleTop
Selects all header elements.
In the example below we apply an orange background to all header elements within the '#main' division of the page.
$(function(){
$('#btn1').on('click', function() {
$("#main :header").css('backgroundColor', 'orange');
});
});
In the example below we apply a teal background to all header elements within the '#sidebarleft' division of the page.
$(function(){
$('#btn2').on('click', function() {
$("#sidebarleft :header").css('backgroundColor', 'teal');
});
});