Can I use brackets to separate multiple selectors?

Question

I want to select first tag a nested under either div with class article article_rubric_top or with class article article_top article_right

I try:

$('div.article.article_rubric_top a:first,div.article.article_top.article_right a:first')

But get much less tags than expected. I wonder whether I should somehow separate nested tag selectors when I use multiple selectors?

Like this:

$('(div.article.article_rubric_top a:first),(div.article.article_top.article_right a:first)')

Upd: Minimal data example. I expect to match all three a tags.

<div class="article article_rubric_top">            
            <a href="http://ua.korrespondent.net/showbiz/music/3899530-duet-potap-i-nastia-zaiavyv-pro-te-scho-yde-zi-stseny" class="article__img-link"></a>           
</div>

<div class="article article_top article_right">

            <a href="http://ua.korrespondent.net/ukraine/3899526-ukraintsi-pochaly-chastishe-yizdyty-v-rosiui" class="article__img-link">
                <noscript><img src="https://kor.ill.in.ua/m/400x253/2072539.jpg"></noscript><img src="/i/blank.gif" data-href="https://kor.ill.in.ua/m/400x253/2072539.jpg" alt="Українці почали частіше їздити в Росію" class="article__img lzl"></a>         
</div>

<div class="article article_rubric_top">          
            <a href="http://ua.korrespondent.net/ukraine/3899521-likari-dozvolyly-prodovzhyty-sud-nad-kokhanivskym" class="article__img-link">
            </a>           
</div>

Upd For some reason minimal example does not work as my actual example

Image of jquery run in browser

I get div and a tags instead of just a tags.

"Should" you? Since when was that allowed in the first place? Did I miss something? — BoltClock, Mar 02 '18 at 14:08
@BoltClock, you have a point. Corrected. I need logical brackets and I ask whether there are ones? — Borys Olifirow, Mar 02 '18 at 14:12
Assuming that `()` would be allowed for grouping in css, then both selector would most likely still produce the same result. So please show a minimal example where you get the wrong result, and explain what the result you expect, something like that [fiddle](https://jsfiddle.net/0q55axu5/4/) — t.niese, Mar 02 '18 at 14:17
@t.niese: [Related](https://stackoverflow.com/questions/5478920/are-parentheses-allowed-in-css-selectors/5478943#5478943) — BoltClock, Mar 02 '18 at 14:50

Jamiec · Answer 1 · 2018-03-02T14:51:10.797

0

I expect to match all three a tags.

Your selector should be div.article a:first-child - dont overcomplicate it with the specific classes. You have a perfectly valid shared class to target the appropriate div elements.

$('.article a:first-child').css("background-color","yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article article_rubric_top">            
            <a href="http://ua.korrespondent.net/showbiz/music/3899530-duet-potap-i-nastia-zaiavyv-pro-te-scho-yde-zi-stseny" class="article__img-link">1</a>           
</div>

<div class="article article_top article_right">

            <a href="http://ua.korrespondent.net/ukraine/3899526-ukraintsi-pochaly-chastishe-yizdyty-v-rosiui" class="article__img-link">
                <noscript><img src="https://kor.ill.in.ua/m/400x253/2072539.jpg"></noscript><img src="/i/blank.gif" data-href="https://kor.ill.in.ua/m/400x253/2072539.jpg" alt="Українці почали частіше їздити в Росію" class="article__img lzl">2</a>         
</div>

<div class="article article_rubric_top">          
            <a href="http://ua.korrespondent.net/ukraine/3899521-likari-dozvolyly-prodovzhyty-sud-nad-kokhanivskym" class="article__img-link">3
            </a>           
</div>

edited Mar 02 '18 at 14:51

answered Mar 02 '18 at 14:38

Jamiec

133,658
13
134
193

As for jQuery and CSS having pseudos with the same name, if I really wanted to put the blame on one of them, it would be jQuery. The design of jQuery's :first pseudo completely subverts how selectors work. The :first pseudo in CSS is a page selector and really isn't relevant to the conversation since page selectors follow a separate grammar from the rest of the Selectors standard. – BoltClock Mar 02 '18 at 14:47
"The design of jQuery's :first pseudo completely subverts how selectors work." Case in point: this answer is wrong - `div.article a:first` will only ever match at most one `a` element - the first such element that matches `div.article a`. – BoltClock Mar 02 '18 at 14:50
@Boltclock I might have missed to make my point clear due to not being a native speaker. "put jQuery in bad light" was supposed to put the blame on jQuery. Glad to see the growing tendency to overcome jQuery as a dependency almost in every big OS library. – connexo Mar 02 '18 at 14:50
@BoltClock good spot (it was a lazy copy from the OP). Now fixed. – Jamiec Mar 02 '18 at 14:53

score 0 · Answer 2 · answered Mar 02 '18 at 14:38

I don't think you can. I've never tried, but I think there are better possibilities.

You could just simplify the selector

$(".article > a");

You could join an array

$([
    "div.article.article_rubric_top a:first",
    "div.article.article_top.article_right a:first"
].join(","))

I think that'd be far easier to work with than a longer string

score 0 · Answer 3 · answered Mar 02 '18 at 14:42

Try writing your selector like this:

$('div.article.article_rubric_top,div.article.article_top.article_right').find('a:first')

Here's a working snippet, I think this is what you wanted?

$('div.article.article_rubric_top,div.article.article_top.article_right').find('a:first').css('border','1px solid red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article article_rubric_top">            
            <a href="http://ua.korrespondent.net/showbiz/music/3899530-duet-potap-i-nastia-zaiavyv-pro-te-scho-yde-zi-stseny" class="article__img-link">a</a>           
</div>

<div class="article article_top article_right">

            <a href="http://ua.korrespondent.net/ukraine/3899526-ukraintsi-pochaly-chastishe-yizdyty-v-rosiui" class="article__img-link">b
                <noscript><img src="https://kor.ill.in.ua/m/400x253/2072539.jpg"></noscript><img src="/i/blank.gif" data-href="https://kor.ill.in.ua/m/400x253/2072539.jpg" alt="Українці почали частіше їздити в Росію" class="article__img lzl"></a>         
</div>

<div class="article article_rubric_top">          
            <a href="http://ua.korrespondent.net/ukraine/3899521-likari-dozvolyly-prodovzhyty-sud-nad-kokhanivskym" class="article__img-link">c
            </a>
</div>

Can I use brackets to separate multiple selectors?

3 Answers3