:langS2C Home « Selectors « :lang
Structural pseudo-class selector.
Shorthand version $(':lang(language)')
Description
The :lang selector, selects all elements that match the specified language code.
- This selector will check for the HTML
langcommon attribute within the specified elements.
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(':lang') | Language pseudo-class selector match |
Parameters
| Parameter | Description |
|---|---|
language | A language code that may be hyphenated to further define it:en - Englishen-us - US English |
Return
N/A.
:lang ExampleTop
Selects all elements that match the specified language code.
Selects all elements that match the specified language code.
When the button below is pressed the first time, the background colours of the paragraphs below will change, dependant upon the HTML lang common attribute that has been set.
A paragraph with a lang attribute and nl subcode.
A paragraph with a lang attribute and en-us subcode.
A paragraph with no lang attribute.
A paragraph with a lang attribute and fr subcode.
A paragraph with a lang attribute and en-gb subcode.
$(function(){
$('#btn1').one('click', function() {
$("p:lang(nl)").css('backgroundColor', 'lime');
$("p:lang(fr)").css('backgroundColor', 'cyan');
});
});
When the button below is pressed the first time, the background colours of the paragraphs below will change, dependant upon the HTML lang common attribute that has been set.
A paragraph with a lang attribute and en subcode.
A paragraph with a lang attribute and en-us subcode.
A paragraph with no lang attribute.
A paragraph with a lang attribute and en-gb subcode.
$(function(){
$('#btn2').one('click', function() {
$("p:lang(en)").css('backgroundColor', 'yellow');
$("p:lang(en-us)").css('backgroundColor', 'orange');
$("p:lang(en-gb)").css('backgroundColor', 'silver');
});
});