JQuery combine selectors

In this article, we will discuss jQuery combine selectors. The combine selector is also known Combination selector in Jquery.

Combine selector

To select HTML elements as specifically as possible, we use a jquery combination selector. For a more specific selection of HTML element, In CSS it is possible to combine selectors, whihc is called as CSS combination selector. To combine selectors; we place selector one beside another without any seperator.
i.e. selector1selector2…

Ex:

tagselectorclassselector,
tagselectoridselector,
tagselectoridselectorattributeselector etc.

Syntax ofJquery Combination selector:

$("CSS combination selector").action(parameters);

To the JQuery funciton, if we pass the CSS combination selector then it is called a jquery combination selector. i.e. a jQuery function with a CSS combination selector as a parameter is called jQuery combination or combine selector.

Ex:

$("h1.redBorder").css("border", "2px dashed red");

The above code selects any h1 element on the page, whose class attribute value is set to red border and applies the border of 2px dashed red.

$("p.redBorder").css("border", "2px solid red");

The above code selects any p element on the page, whose class attribute value is set to red border and applies the border of 2px solid red.

$("p.redBorder[align=right]").css("border", "2px dotted red");

The above code selects any p element on the page, whose class attribute value set to redBorder, aligned right and applies the border of 2px dotted red.

Example code

Jquery:

$("h1.redBorder").css({"border": "2px dashed red"});
$("p.redBorder").css({"border": "2px solid blue"});
$("h1.greenBorder").css({"border": "2px dashed green"});
$("p.greenBorder").css({"border": "2px solid black"});

HTML:

<h1 class="redBorder">Heading Text </h1>
<p class="redBorder">Paragraph Text</p>
<p class="redBorder">Paragraph Text</p>

<h1 class="greenBorder">Heading Text </h1>
<p class="greenBorder">Paragraph Text</p>
<p class="greenBorder">Paragraph Text</p>

Output:

1. In the above HTML code, we have two h1 tag with classname redborder and greenborder. And we have four <p> tag with classname redborder and greenborder.
2. I want to style only the h1 tag which has a class name of “redBorder“, so I’ve selected (h1.redBorder) using the combined selector. Then we set a 2px red dashed border.
3. Then, I want to style only the <p> tag which has a class name of “redBorder“, so I’ve selected (p.redBorder) using the combined selector. Then we set a 2px blue solid border.
4. Thirdly, I want to style only for <h1> tag which has a class name of “greenBorder“, so I’ve selected (h1.greenBorder) using a combined selector. Then we set a 2px dashed green border.
5. Finally, I want to style only the <p> tag which has a class name of r”greenBorder“, so I’ve selected (p.greenBorder). Then we set 2px black solid border.
6. See the above output, the first <h1> text is displayed on a red border, 2 paragraph text is displayed on a blue border, then <h1> text is displayed on a green border and the final h1 text is displayed in a black border.