How can I select an element with multiple classes in jQuery?












1857















I want to select all the elements that have the two classes a and b.



<element class="a b">


So, only the elements that have both classes.



When I use $(".a, .b") it gives me the union, but I want the intersection.










share|improve this question




















  • 2





    It would be nice if you could define what union and intersection means for us newbs :)

    – Kolob Canyon
    Apr 13 '16 at 3:22






  • 6





    @KolobCanyon union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

    – Katharine Osborne
    Jul 25 '16 at 16:04






  • 4





    I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.

    – Teemu Leisti
    Sep 8 '16 at 11:24


















1857















I want to select all the elements that have the two classes a and b.



<element class="a b">


So, only the elements that have both classes.



When I use $(".a, .b") it gives me the union, but I want the intersection.










share|improve this question




















  • 2





    It would be nice if you could define what union and intersection means for us newbs :)

    – Kolob Canyon
    Apr 13 '16 at 3:22






  • 6





    @KolobCanyon union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

    – Katharine Osborne
    Jul 25 '16 at 16:04






  • 4





    I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.

    – Teemu Leisti
    Sep 8 '16 at 11:24
















1857












1857








1857


291






I want to select all the elements that have the two classes a and b.



<element class="a b">


So, only the elements that have both classes.



When I use $(".a, .b") it gives me the union, but I want the intersection.










share|improve this question
















I want to select all the elements that have the two classes a and b.



<element class="a b">


So, only the elements that have both classes.



When I use $(".a, .b") it gives me the union, but I want the intersection.







javascript jquery css-selectors jquery-selectors






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited May 1 '18 at 10:11









John Slegers

27.7k13146129




27.7k13146129










asked Jun 24 '09 at 22:28









MladenMladen

11.4k113447




11.4k113447








  • 2





    It would be nice if you could define what union and intersection means for us newbs :)

    – Kolob Canyon
    Apr 13 '16 at 3:22






  • 6





    @KolobCanyon union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

    – Katharine Osborne
    Jul 25 '16 at 16:04






  • 4





    I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.

    – Teemu Leisti
    Sep 8 '16 at 11:24
















  • 2





    It would be nice if you could define what union and intersection means for us newbs :)

    – Kolob Canyon
    Apr 13 '16 at 3:22






  • 6





    @KolobCanyon union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

    – Katharine Osborne
    Jul 25 '16 at 16:04






  • 4





    I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.

    – Teemu Leisti
    Sep 8 '16 at 11:24










2




2





It would be nice if you could define what union and intersection means for us newbs :)

– Kolob Canyon
Apr 13 '16 at 3:22





It would be nice if you could define what union and intersection means for us newbs :)

– Kolob Canyon
Apr 13 '16 at 3:22




6




6





@KolobCanyon union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

– Katharine Osborne
Jul 25 '16 at 16:04





@KolobCanyon union and intersection are basic set theory concepts. So for instance a union would be all French speakers (includes both men and women), whereas an intersection would be all women who speak French (excludes everyone who does not speak French, and excludes all people who are not women). Unions and intersections can be made with any number of characteristics defining each set. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

– Katharine Osborne
Jul 25 '16 at 16:04




4




4





I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.

– Teemu Leisti
Sep 8 '16 at 11:24







I think you mean that of the two sets "women" and "French-speakers", the union would be all the women in the world and all the French-speakers in the world, a set that includes both women who don't speak French and French-speaking men. The intersection is, as you wrote, only those women who speak French.

– Teemu Leisti
Sep 8 '16 at 11:24














11 Answers
11






active

oldest

votes


















2384














If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:



$('.a.b')


The order is not relevant, so you can also swap the classes:



$('.b.a')


So to match a div element that has an ID of a with classes b and c, you would write:



$('div#a.b.c')


(In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)






share|improve this answer





















  • 8





    @Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

    – Sasha Chedygov
    Aug 7 '12 at 17:19








  • 2





    Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

    – Flater
    Aug 8 '12 at 8:29






  • 3





    This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

    – Johnny
    Aug 26 '12 at 23:54








  • 25





    @Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

    – Sasha Chedygov
    May 12 '13 at 23:49








  • 2





    @AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

    – Sasha Chedygov
    Oct 15 '15 at 3:41





















157














You can do this using the filter() function:



$(".a").filter(".b")





share|improve this answer





















  • 14





    What is the difference between this answer and the accepted one?

    – Daniel Allen Langdon
    Aug 9 '11 at 14:32






  • 43





    @Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

    – Sasha Chedygov
    Sep 8 '11 at 9:39






  • 4





    This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

    – pac
    Feb 9 '12 at 22:28








  • 6





    @pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

    – Sasha Chedygov
    Feb 14 '12 at 10:19






  • 5





    This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

    – Qix
    Mar 12 '14 at 21:50



















110














For the case



<element class="a">
<element class="b c">
</element>
</element>


You would need to put a space in between .a and .b.c



$('.a .b.c')





share|improve this answer


























  • Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

    – Ipsita Rout
    Apr 6 '13 at 9:07






  • 1





    @IpsitaRout $('.a .b, .a .c') should do the trick

    – Mr47
    Sep 16 '13 at 13:20













  • In this example, would the selector $('.a .c.b') also work ?

    – DanFromGermany
    Aug 22 '14 at 9:43











  • Yes, as the order does not matter.

    – Zim84
    Sep 2 '18 at 8:40











  • $('.a > element')

    – AXL
    Sep 3 '18 at 11:54



















53














The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b') whereas you should be using $('.a.b').



For more information, see the overview of the different ways to combine selectors herebelow!





Group Selector : ","



Select all <h1> elements AND all <p> elements AND all <a> elements :



$('h1, p, a')


Multiples selector : "" (no character)



Select all <input> elements of type text, with classes code and red :



$('input[type="text"].code.red')


Descendant Selector : " " (space)



Select all <i> elements inside <p> elements:



$('p i')


Child Selector : ">"



Select all <ul> elements that are immediate children of a <li> element:



$('li > ul')


Adjacent Sibling Selector : "+"



Select all <a> elements that are placed immediately after <h2> elements:



$('h2 + a')


General Sibling Selector : "~"



Select all <span> elements that are siblings of <div> elements:



$('div ~ span')





share|improve this answer

































    35

















    $('.a .b , .a .c').css('border', '2px solid yellow');
    //selects b and c

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="a">a
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    </div>








    share|improve this answer

































      24














      Just mention another case with element:



      E.g. <div id="title1" class="A B C">



      Just type: $("div#title1.A.B.C")






      share|improve this answer































        23














        Vanilla JavaScript solution:-



        document.querySelectorAll('.a.b')






        share|improve this answer































          17














          For better performance you can use



          $('div.a.b')


          This will look only through the div elements instead of stepping through all the html elements that you have on your page.






          share|improve this answer































            7














            Group Selector



            body {font-size: 12px; }
            body {font-family: arial, helvetica, sans-serif;}
            th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
            td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


            Becomes this:



            body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


            So in your case you have tried the group selector whereas its an intersection



            $(".a, .b") 


            instead use this



            $(".a.b") 





            share|improve this answer































              3














              You do not need jQuery for this



              In Vanilla you can do :



              document.querySelectorAll('.a.b')





              share|improve this answer































                1














                You can use getElementsByClassName() method for what you want.






                var elems = document.getElementsByClassName("a b c");
                elems[0].style.color = "green";
                console.log(elems[0]);

                <ul>
                <li class="a">a</li>
                <li class="a b">a, b</li>
                <li class="a b c">a, b, c</li>
                </ul>





                This is the fastest solution also. you can see a benchmark about that here.






                share|improve this answer






















                  protected by Mohammad Adil Jun 23 '13 at 14:56



                  Thank you for your interest in this question.
                  Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                  Would you like to answer one of these unanswered questions instead?














                  11 Answers
                  11






                  active

                  oldest

                  votes








                  11 Answers
                  11






                  active

                  oldest

                  votes









                  active

                  oldest

                  votes






                  active

                  oldest

                  votes









                  2384














                  If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:



                  $('.a.b')


                  The order is not relevant, so you can also swap the classes:



                  $('.b.a')


                  So to match a div element that has an ID of a with classes b and c, you would write:



                  $('div#a.b.c')


                  (In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)






                  share|improve this answer





















                  • 8





                    @Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

                    – Sasha Chedygov
                    Aug 7 '12 at 17:19








                  • 2





                    Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

                    – Flater
                    Aug 8 '12 at 8:29






                  • 3





                    This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

                    – Johnny
                    Aug 26 '12 at 23:54








                  • 25





                    @Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

                    – Sasha Chedygov
                    May 12 '13 at 23:49








                  • 2





                    @AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

                    – Sasha Chedygov
                    Oct 15 '15 at 3:41


















                  2384














                  If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:



                  $('.a.b')


                  The order is not relevant, so you can also swap the classes:



                  $('.b.a')


                  So to match a div element that has an ID of a with classes b and c, you would write:



                  $('div#a.b.c')


                  (In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)






                  share|improve this answer





















                  • 8





                    @Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

                    – Sasha Chedygov
                    Aug 7 '12 at 17:19








                  • 2





                    Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

                    – Flater
                    Aug 8 '12 at 8:29






                  • 3





                    This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

                    – Johnny
                    Aug 26 '12 at 23:54








                  • 25





                    @Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

                    – Sasha Chedygov
                    May 12 '13 at 23:49








                  • 2





                    @AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

                    – Sasha Chedygov
                    Oct 15 '15 at 3:41
















                  2384












                  2384








                  2384







                  If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:



                  $('.a.b')


                  The order is not relevant, so you can also swap the classes:



                  $('.b.a')


                  So to match a div element that has an ID of a with classes b and c, you would write:



                  $('div#a.b.c')


                  (In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)






                  share|improve this answer















                  If you want to match only elements with both classes (an intersection, like a logical AND), just write the selectors together without spaces in between:



                  $('.a.b')


                  The order is not relevant, so you can also swap the classes:



                  $('.b.a')


                  So to match a div element that has an ID of a with classes b and c, you would write:



                  $('div#a.b.c')


                  (In practice, you most likely don't need to get that specific, and an ID or class selector by itself is usually enough: $('#a').)







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 25 '18 at 21:26

























                  answered Jun 24 '09 at 22:30









                  Sasha ChedygovSasha Chedygov

                  87.1k2192105




                  87.1k2192105








                  • 8





                    @Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

                    – Sasha Chedygov
                    Aug 7 '12 at 17:19








                  • 2





                    Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

                    – Flater
                    Aug 8 '12 at 8:29






                  • 3





                    This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

                    – Johnny
                    Aug 26 '12 at 23:54








                  • 25





                    @Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

                    – Sasha Chedygov
                    May 12 '13 at 23:49








                  • 2





                    @AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

                    – Sasha Chedygov
                    Oct 15 '15 at 3:41
















                  • 8





                    @Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

                    – Sasha Chedygov
                    Aug 7 '12 at 17:19








                  • 2





                    Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

                    – Flater
                    Aug 8 '12 at 8:29






                  • 3





                    This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

                    – Johnny
                    Aug 26 '12 at 23:54








                  • 25





                    @Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

                    – Sasha Chedygov
                    May 12 '13 at 23:49








                  • 2





                    @AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

                    – Sasha Chedygov
                    Oct 15 '15 at 3:41










                  8




                  8





                  @Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

                  – Sasha Chedygov
                  Aug 7 '12 at 17:19







                  @Flater: It was just for the sake of example. But it might be useful if the classes b and c are dynamically added, and you only want to select the element if it has those classes.

                  – Sasha Chedygov
                  Aug 7 '12 at 17:19






                  2




                  2





                  Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

                  – Flater
                  Aug 8 '12 at 8:29





                  Aha, good point :-) Up until now I would've used .hasClass() but this is a way better notation.

                  – Flater
                  Aug 8 '12 at 8:29




                  3




                  3





                  This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

                  – Johnny
                  Aug 26 '12 at 23:54







                  This method of selection also works for CSS e.g. .a.b { style properties } see: css-tricks.com/multiple-class-id-selectors

                  – Johnny
                  Aug 26 '12 at 23:54






                  25




                  25





                  @Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

                  – Sasha Chedygov
                  May 12 '13 at 23:49







                  @Shimmy: Yes. A space between two selectors means you're searching for descendants; i.e. .a .b searches for elements with class b that are descendants of an element with class a. So something like div a will only return a elements that are inside a div element.

                  – Sasha Chedygov
                  May 12 '13 at 23:49






                  2




                  2





                  @AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

                  – Sasha Chedygov
                  Oct 15 '15 at 3:41







                  @AaA: That's incorrect; it's been this way since the beginning of jQuery, because that's how CSS works. A comma selects elements that match either of the selectors (think of it as a logical OR), not both, so it's not the same thing (though I can see how that might be confusing).

                  – Sasha Chedygov
                  Oct 15 '15 at 3:41















                  157














                  You can do this using the filter() function:



                  $(".a").filter(".b")





                  share|improve this answer





















                  • 14





                    What is the difference between this answer and the accepted one?

                    – Daniel Allen Langdon
                    Aug 9 '11 at 14:32






                  • 43





                    @Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

                    – Sasha Chedygov
                    Sep 8 '11 at 9:39






                  • 4





                    This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

                    – pac
                    Feb 9 '12 at 22:28








                  • 6





                    @pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

                    – Sasha Chedygov
                    Feb 14 '12 at 10:19






                  • 5





                    This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

                    – Qix
                    Mar 12 '14 at 21:50
















                  157














                  You can do this using the filter() function:



                  $(".a").filter(".b")





                  share|improve this answer





















                  • 14





                    What is the difference between this answer and the accepted one?

                    – Daniel Allen Langdon
                    Aug 9 '11 at 14:32






                  • 43





                    @Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

                    – Sasha Chedygov
                    Sep 8 '11 at 9:39






                  • 4





                    This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

                    – pac
                    Feb 9 '12 at 22:28








                  • 6





                    @pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

                    – Sasha Chedygov
                    Feb 14 '12 at 10:19






                  • 5





                    This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

                    – Qix
                    Mar 12 '14 at 21:50














                  157












                  157








                  157







                  You can do this using the filter() function:



                  $(".a").filter(".b")





                  share|improve this answer















                  You can do this using the filter() function:



                  $(".a").filter(".b")






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Jan 30 '17 at 13:56









                  Ben Everard

                  11k105593




                  11k105593










                  answered Jun 24 '09 at 22:34









                  Jamie LoveJamie Love

                  4,28742433




                  4,28742433








                  • 14





                    What is the difference between this answer and the accepted one?

                    – Daniel Allen Langdon
                    Aug 9 '11 at 14:32






                  • 43





                    @Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

                    – Sasha Chedygov
                    Sep 8 '11 at 9:39






                  • 4





                    This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

                    – pac
                    Feb 9 '12 at 22:28








                  • 6





                    @pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

                    – Sasha Chedygov
                    Feb 14 '12 at 10:19






                  • 5





                    This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

                    – Qix
                    Mar 12 '14 at 21:50














                  • 14





                    What is the difference between this answer and the accepted one?

                    – Daniel Allen Langdon
                    Aug 9 '11 at 14:32






                  • 43





                    @Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

                    – Sasha Chedygov
                    Sep 8 '11 at 9:39






                  • 4





                    This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

                    – pac
                    Feb 9 '12 at 22:28








                  • 6





                    @pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

                    – Sasha Chedygov
                    Feb 14 '12 at 10:19






                  • 5





                    This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

                    – Qix
                    Mar 12 '14 at 21:50








                  14




                  14





                  What is the difference between this answer and the accepted one?

                  – Daniel Allen Langdon
                  Aug 9 '11 at 14:32





                  What is the difference between this answer and the accepted one?

                  – Daniel Allen Langdon
                  Aug 9 '11 at 14:32




                  43




                  43





                  @Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

                  – Sasha Chedygov
                  Sep 8 '11 at 9:39





                  @Rice: This one will be a little bit slower, because it will build a list of objects with class "a" first, then remove all but those that have class "b", whereas mine does this in one step. But otherwise, no difference.

                  – Sasha Chedygov
                  Sep 8 '11 at 9:39




                  4




                  4





                  This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

                  – pac
                  Feb 9 '12 at 22:28







                  This worked for me in an instance where I was searching for a class defined as a variable, which didn't work with the syntax in the first example. eg: $('.foo').filter(variable). Thanks

                  – pac
                  Feb 9 '12 at 22:28






                  6




                  6





                  @pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

                  – Sasha Chedygov
                  Feb 14 '12 at 10:19





                  @pac: $('.foo' + variable) should have done the trick, but I can see where this method would be clearer in that case.

                  – Sasha Chedygov
                  Feb 14 '12 at 10:19




                  5




                  5





                  This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

                  – Qix
                  Mar 12 '14 at 21:50





                  This is also more efficient if you have already found .a's and need to filter multiple times based different arbitrary classes that also belong to the original .a set.

                  – Qix
                  Mar 12 '14 at 21:50











                  110














                  For the case



                  <element class="a">
                  <element class="b c">
                  </element>
                  </element>


                  You would need to put a space in between .a and .b.c



                  $('.a .b.c')





                  share|improve this answer


























                  • Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

                    – Ipsita Rout
                    Apr 6 '13 at 9:07






                  • 1





                    @IpsitaRout $('.a .b, .a .c') should do the trick

                    – Mr47
                    Sep 16 '13 at 13:20













                  • In this example, would the selector $('.a .c.b') also work ?

                    – DanFromGermany
                    Aug 22 '14 at 9:43











                  • Yes, as the order does not matter.

                    – Zim84
                    Sep 2 '18 at 8:40











                  • $('.a > element')

                    – AXL
                    Sep 3 '18 at 11:54
















                  110














                  For the case



                  <element class="a">
                  <element class="b c">
                  </element>
                  </element>


                  You would need to put a space in between .a and .b.c



                  $('.a .b.c')





                  share|improve this answer


























                  • Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

                    – Ipsita Rout
                    Apr 6 '13 at 9:07






                  • 1





                    @IpsitaRout $('.a .b, .a .c') should do the trick

                    – Mr47
                    Sep 16 '13 at 13:20













                  • In this example, would the selector $('.a .c.b') also work ?

                    – DanFromGermany
                    Aug 22 '14 at 9:43











                  • Yes, as the order does not matter.

                    – Zim84
                    Sep 2 '18 at 8:40











                  • $('.a > element')

                    – AXL
                    Sep 3 '18 at 11:54














                  110












                  110








                  110







                  For the case



                  <element class="a">
                  <element class="b c">
                  </element>
                  </element>


                  You would need to put a space in between .a and .b.c



                  $('.a .b.c')





                  share|improve this answer















                  For the case



                  <element class="a">
                  <element class="b c">
                  </element>
                  </element>


                  You would need to put a space in between .a and .b.c



                  $('.a .b.c')






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Dec 30 '16 at 15:52









                  WaKo

                  7,92722442




                  7,92722442










                  answered Mar 25 '13 at 20:31









                  juanpaulojuanpaulo

                  1,144173




                  1,144173













                  • Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

                    – Ipsita Rout
                    Apr 6 '13 at 9:07






                  • 1





                    @IpsitaRout $('.a .b, .a .c') should do the trick

                    – Mr47
                    Sep 16 '13 at 13:20













                  • In this example, would the selector $('.a .c.b') also work ?

                    – DanFromGermany
                    Aug 22 '14 at 9:43











                  • Yes, as the order does not matter.

                    – Zim84
                    Sep 2 '18 at 8:40











                  • $('.a > element')

                    – AXL
                    Sep 3 '18 at 11:54



















                  • Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

                    – Ipsita Rout
                    Apr 6 '13 at 9:07






                  • 1





                    @IpsitaRout $('.a .b, .a .c') should do the trick

                    – Mr47
                    Sep 16 '13 at 13:20













                  • In this example, would the selector $('.a .c.b') also work ?

                    – DanFromGermany
                    Aug 22 '14 at 9:43











                  • Yes, as the order does not matter.

                    – Zim84
                    Sep 2 '18 at 8:40











                  • $('.a > element')

                    – AXL
                    Sep 3 '18 at 11:54

















                  Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

                  – Ipsita Rout
                  Apr 6 '13 at 9:07





                  Adding to your answer I would like to know how to access both b and c if the case is as below:<element class="a"><element class="b"></element><element class="c"></element> </element> ? Through $('.a .b.c') gives wrong result.

                  – Ipsita Rout
                  Apr 6 '13 at 9:07




                  1




                  1





                  @IpsitaRout $('.a .b, .a .c') should do the trick

                  – Mr47
                  Sep 16 '13 at 13:20







                  @IpsitaRout $('.a .b, .a .c') should do the trick

                  – Mr47
                  Sep 16 '13 at 13:20















                  In this example, would the selector $('.a .c.b') also work ?

                  – DanFromGermany
                  Aug 22 '14 at 9:43





                  In this example, would the selector $('.a .c.b') also work ?

                  – DanFromGermany
                  Aug 22 '14 at 9:43













                  Yes, as the order does not matter.

                  – Zim84
                  Sep 2 '18 at 8:40





                  Yes, as the order does not matter.

                  – Zim84
                  Sep 2 '18 at 8:40













                  $('.a > element')

                  – AXL
                  Sep 3 '18 at 11:54





                  $('.a > element')

                  – AXL
                  Sep 3 '18 at 11:54











                  53














                  The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b') whereas you should be using $('.a.b').



                  For more information, see the overview of the different ways to combine selectors herebelow!





                  Group Selector : ","



                  Select all <h1> elements AND all <p> elements AND all <a> elements :



                  $('h1, p, a')


                  Multiples selector : "" (no character)



                  Select all <input> elements of type text, with classes code and red :



                  $('input[type="text"].code.red')


                  Descendant Selector : " " (space)



                  Select all <i> elements inside <p> elements:



                  $('p i')


                  Child Selector : ">"



                  Select all <ul> elements that are immediate children of a <li> element:



                  $('li > ul')


                  Adjacent Sibling Selector : "+"



                  Select all <a> elements that are placed immediately after <h2> elements:



                  $('h2 + a')


                  General Sibling Selector : "~"



                  Select all <span> elements that are siblings of <div> elements:



                  $('div ~ span')





                  share|improve this answer






























                    53














                    The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b') whereas you should be using $('.a.b').



                    For more information, see the overview of the different ways to combine selectors herebelow!





                    Group Selector : ","



                    Select all <h1> elements AND all <p> elements AND all <a> elements :



                    $('h1, p, a')


                    Multiples selector : "" (no character)



                    Select all <input> elements of type text, with classes code and red :



                    $('input[type="text"].code.red')


                    Descendant Selector : " " (space)



                    Select all <i> elements inside <p> elements:



                    $('p i')


                    Child Selector : ">"



                    Select all <ul> elements that are immediate children of a <li> element:



                    $('li > ul')


                    Adjacent Sibling Selector : "+"



                    Select all <a> elements that are placed immediately after <h2> elements:



                    $('h2 + a')


                    General Sibling Selector : "~"



                    Select all <span> elements that are siblings of <div> elements:



                    $('div ~ span')





                    share|improve this answer




























                      53












                      53








                      53







                      The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b') whereas you should be using $('.a.b').



                      For more information, see the overview of the different ways to combine selectors herebelow!





                      Group Selector : ","



                      Select all <h1> elements AND all <p> elements AND all <a> elements :



                      $('h1, p, a')


                      Multiples selector : "" (no character)



                      Select all <input> elements of type text, with classes code and red :



                      $('input[type="text"].code.red')


                      Descendant Selector : " " (space)



                      Select all <i> elements inside <p> elements:



                      $('p i')


                      Child Selector : ">"



                      Select all <ul> elements that are immediate children of a <li> element:



                      $('li > ul')


                      Adjacent Sibling Selector : "+"



                      Select all <a> elements that are placed immediately after <h2> elements:



                      $('h2 + a')


                      General Sibling Selector : "~"



                      Select all <span> elements that are siblings of <div> elements:



                      $('div ~ span')





                      share|improve this answer















                      The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b') whereas you should be using $('.a.b').



                      For more information, see the overview of the different ways to combine selectors herebelow!





                      Group Selector : ","



                      Select all <h1> elements AND all <p> elements AND all <a> elements :



                      $('h1, p, a')


                      Multiples selector : "" (no character)



                      Select all <input> elements of type text, with classes code and red :



                      $('input[type="text"].code.red')


                      Descendant Selector : " " (space)



                      Select all <i> elements inside <p> elements:



                      $('p i')


                      Child Selector : ">"



                      Select all <ul> elements that are immediate children of a <li> element:



                      $('li > ul')


                      Adjacent Sibling Selector : "+"



                      Select all <a> elements that are placed immediately after <h2> elements:



                      $('h2 + a')


                      General Sibling Selector : "~"



                      Select all <span> elements that are siblings of <div> elements:



                      $('div ~ span')






                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Dec 29 '16 at 14:44

























                      answered Jan 20 '16 at 22:24









                      John SlegersJohn Slegers

                      27.7k13146129




                      27.7k13146129























                          35

















                          $('.a .b , .a .c').css('border', '2px solid yellow');
                          //selects b and c

                          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                          <div class="a">a
                          <div class="b">b</div>
                          <div class="c">c</div>
                          <div class="d">d</div>
                          </div>








                          share|improve this answer






























                            35

















                            $('.a .b , .a .c').css('border', '2px solid yellow');
                            //selects b and c

                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                            <div class="a">a
                            <div class="b">b</div>
                            <div class="c">c</div>
                            <div class="d">d</div>
                            </div>








                            share|improve this answer




























                              35












                              35








                              35










                              $('.a .b , .a .c').css('border', '2px solid yellow');
                              //selects b and c

                              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                              <div class="a">a
                              <div class="b">b</div>
                              <div class="c">c</div>
                              <div class="d">d</div>
                              </div>








                              share|improve this answer


















                              $('.a .b , .a .c').css('border', '2px solid yellow');
                              //selects b and c

                              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                              <div class="a">a
                              <div class="b">b</div>
                              <div class="c">c</div>
                              <div class="d">d</div>
                              </div>








                              $('.a .b , .a .c').css('border', '2px solid yellow');
                              //selects b and c

                              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                              <div class="a">a
                              <div class="b">b</div>
                              <div class="c">c</div>
                              <div class="d">d</div>
                              </div>





                              $('.a .b , .a .c').css('border', '2px solid yellow');
                              //selects b and c

                              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                              <div class="a">a
                              <div class="b">b</div>
                              <div class="c">c</div>
                              <div class="d">d</div>
                              </div>






                              share|improve this answer














                              share|improve this answer



                              share|improve this answer








                              edited Dec 27 '17 at 7:52









                              beaver

                              14.1k22148




                              14.1k22148










                              answered Apr 19 '13 at 7:19









                              user2298171user2298171

                              35932




                              35932























                                  24














                                  Just mention another case with element:



                                  E.g. <div id="title1" class="A B C">



                                  Just type: $("div#title1.A.B.C")






                                  share|improve this answer




























                                    24














                                    Just mention another case with element:



                                    E.g. <div id="title1" class="A B C">



                                    Just type: $("div#title1.A.B.C")






                                    share|improve this answer


























                                      24












                                      24








                                      24







                                      Just mention another case with element:



                                      E.g. <div id="title1" class="A B C">



                                      Just type: $("div#title1.A.B.C")






                                      share|improve this answer













                                      Just mention another case with element:



                                      E.g. <div id="title1" class="A B C">



                                      Just type: $("div#title1.A.B.C")







                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered Dec 14 '12 at 16:15









                                      macio.Junmacio.Jun

                                      6,98013635




                                      6,98013635























                                          23














                                          Vanilla JavaScript solution:-



                                          document.querySelectorAll('.a.b')






                                          share|improve this answer




























                                            23














                                            Vanilla JavaScript solution:-



                                            document.querySelectorAll('.a.b')






                                            share|improve this answer


























                                              23












                                              23








                                              23







                                              Vanilla JavaScript solution:-



                                              document.querySelectorAll('.a.b')






                                              share|improve this answer













                                              Vanilla JavaScript solution:-



                                              document.querySelectorAll('.a.b')







                                              share|improve this answer












                                              share|improve this answer



                                              share|improve this answer










                                              answered Jan 29 '15 at 18:02









                                              Salman AbbasSalman Abbas

                                              17.8k85851




                                              17.8k85851























                                                  17














                                                  For better performance you can use



                                                  $('div.a.b')


                                                  This will look only through the div elements instead of stepping through all the html elements that you have on your page.






                                                  share|improve this answer




























                                                    17














                                                    For better performance you can use



                                                    $('div.a.b')


                                                    This will look only through the div elements instead of stepping through all the html elements that you have on your page.






                                                    share|improve this answer


























                                                      17












                                                      17








                                                      17







                                                      For better performance you can use



                                                      $('div.a.b')


                                                      This will look only through the div elements instead of stepping through all the html elements that you have on your page.






                                                      share|improve this answer













                                                      For better performance you can use



                                                      $('div.a.b')


                                                      This will look only through the div elements instead of stepping through all the html elements that you have on your page.







                                                      share|improve this answer












                                                      share|improve this answer



                                                      share|improve this answer










                                                      answered Sep 28 '15 at 5:26









                                                      Tejas ShahTejas Shah

                                                      779612




                                                      779612























                                                          7














                                                          Group Selector



                                                          body {font-size: 12px; }
                                                          body {font-family: arial, helvetica, sans-serif;}
                                                          th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
                                                          td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                          Becomes this:



                                                          body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                          So in your case you have tried the group selector whereas its an intersection



                                                          $(".a, .b") 


                                                          instead use this



                                                          $(".a.b") 





                                                          share|improve this answer




























                                                            7














                                                            Group Selector



                                                            body {font-size: 12px; }
                                                            body {font-family: arial, helvetica, sans-serif;}
                                                            th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
                                                            td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                            Becomes this:



                                                            body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                            So in your case you have tried the group selector whereas its an intersection



                                                            $(".a, .b") 


                                                            instead use this



                                                            $(".a.b") 





                                                            share|improve this answer


























                                                              7












                                                              7








                                                              7







                                                              Group Selector



                                                              body {font-size: 12px; }
                                                              body {font-family: arial, helvetica, sans-serif;}
                                                              th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
                                                              td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                              Becomes this:



                                                              body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                              So in your case you have tried the group selector whereas its an intersection



                                                              $(".a, .b") 


                                                              instead use this



                                                              $(".a.b") 





                                                              share|improve this answer













                                                              Group Selector



                                                              body {font-size: 12px; }
                                                              body {font-family: arial, helvetica, sans-serif;}
                                                              th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
                                                              td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                              Becomes this:



                                                              body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}


                                                              So in your case you have tried the group selector whereas its an intersection



                                                              $(".a, .b") 


                                                              instead use this



                                                              $(".a.b") 






                                                              share|improve this answer












                                                              share|improve this answer



                                                              share|improve this answer










                                                              answered May 17 '17 at 13:57









                                                              Surya R PraveenSurya R Praveen

                                                              1,3541113




                                                              1,3541113























                                                                  3














                                                                  You do not need jQuery for this



                                                                  In Vanilla you can do :



                                                                  document.querySelectorAll('.a.b')





                                                                  share|improve this answer




























                                                                    3














                                                                    You do not need jQuery for this



                                                                    In Vanilla you can do :



                                                                    document.querySelectorAll('.a.b')





                                                                    share|improve this answer


























                                                                      3












                                                                      3








                                                                      3







                                                                      You do not need jQuery for this



                                                                      In Vanilla you can do :



                                                                      document.querySelectorAll('.a.b')





                                                                      share|improve this answer













                                                                      You do not need jQuery for this



                                                                      In Vanilla you can do :



                                                                      document.querySelectorAll('.a.b')






                                                                      share|improve this answer












                                                                      share|improve this answer



                                                                      share|improve this answer










                                                                      answered Apr 4 '18 at 8:00









                                                                      SandwellSandwell

                                                                      1,1042624




                                                                      1,1042624























                                                                          1














                                                                          You can use getElementsByClassName() method for what you want.






                                                                          var elems = document.getElementsByClassName("a b c");
                                                                          elems[0].style.color = "green";
                                                                          console.log(elems[0]);

                                                                          <ul>
                                                                          <li class="a">a</li>
                                                                          <li class="a b">a, b</li>
                                                                          <li class="a b c">a, b, c</li>
                                                                          </ul>





                                                                          This is the fastest solution also. you can see a benchmark about that here.






                                                                          share|improve this answer




























                                                                            1














                                                                            You can use getElementsByClassName() method for what you want.






                                                                            var elems = document.getElementsByClassName("a b c");
                                                                            elems[0].style.color = "green";
                                                                            console.log(elems[0]);

                                                                            <ul>
                                                                            <li class="a">a</li>
                                                                            <li class="a b">a, b</li>
                                                                            <li class="a b c">a, b, c</li>
                                                                            </ul>





                                                                            This is the fastest solution also. you can see a benchmark about that here.






                                                                            share|improve this answer


























                                                                              1












                                                                              1








                                                                              1







                                                                              You can use getElementsByClassName() method for what you want.






                                                                              var elems = document.getElementsByClassName("a b c");
                                                                              elems[0].style.color = "green";
                                                                              console.log(elems[0]);

                                                                              <ul>
                                                                              <li class="a">a</li>
                                                                              <li class="a b">a, b</li>
                                                                              <li class="a b c">a, b, c</li>
                                                                              </ul>





                                                                              This is the fastest solution also. you can see a benchmark about that here.






                                                                              share|improve this answer













                                                                              You can use getElementsByClassName() method for what you want.






                                                                              var elems = document.getElementsByClassName("a b c");
                                                                              elems[0].style.color = "green";
                                                                              console.log(elems[0]);

                                                                              <ul>
                                                                              <li class="a">a</li>
                                                                              <li class="a b">a, b</li>
                                                                              <li class="a b c">a, b, c</li>
                                                                              </ul>





                                                                              This is the fastest solution also. you can see a benchmark about that here.






                                                                              var elems = document.getElementsByClassName("a b c");
                                                                              elems[0].style.color = "green";
                                                                              console.log(elems[0]);

                                                                              <ul>
                                                                              <li class="a">a</li>
                                                                              <li class="a b">a, b</li>
                                                                              <li class="a b c">a, b, c</li>
                                                                              </ul>





                                                                              var elems = document.getElementsByClassName("a b c");
                                                                              elems[0].style.color = "green";
                                                                              console.log(elems[0]);

                                                                              <ul>
                                                                              <li class="a">a</li>
                                                                              <li class="a b">a, b</li>
                                                                              <li class="a b c">a, b, c</li>
                                                                              </ul>






                                                                              share|improve this answer












                                                                              share|improve this answer



                                                                              share|improve this answer










                                                                              answered Aug 1 '18 at 10:41









                                                                              bahman parsamaneshbahman parsamanesh

                                                                              1,487517




                                                                              1,487517

















                                                                                  protected by Mohammad Adil Jun 23 '13 at 14:56



                                                                                  Thank you for your interest in this question.
                                                                                  Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                                                                                  Would you like to answer one of these unanswered questions instead?



                                                                                  Popular posts from this blog

                                                                                  Berounka

                                                                                  Sphinx de Gizeh

                                                                                  Different font size/position of beamer's navigation symbols template's content depending on regular/plain...