Targeting Same Children, but only Certain, Differing Parents -- CSS and jQuery Selector Style

Question

Is there a way to target only certain children of select parents without duplicating the children selectors and making the selector go off the charts in terms of length?

For example, I want to select the first-child paragraph of certain divs.

CSS would be like

.funny > p:first-child, .sad > p:first-child {
 color: red
}

The markup

<div class="funny">
  <p>This is red</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

<div class="wildcrazy">
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

<div class="sad">
  <p>This is red</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

Obviously, there could be loads of other first paragraphs in lots of other divs besides funny and sad that I do want to target, and there could also be loads of other divs like wildcrazy that I do not want to target.

My question is: can I some how declare the child and prepend it with all the parents? Something like:

.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3 > p:first-child

instead of

.funny p:first, .sad p:first-child, .another_div_class0 p:first-child, .another_div_class1 p:first-child, .another_div_class2 p:first-child, .another_div_class3 p:first-child

No, you can't do that. You have to define *all* parents with children you want to be affected — Zoltan Toth, Aug 02 '12 at 18:40
Yeah, I am figuring that's the way, Zoltan... don't want to use jQuery .has(), either. — rob - not a robber, Aug 02 '12 at 18:42
you should also avoid using child selectors in jQuery - it adds a LOT of overhead - that's one of the reasons why jQuery included the .children(), .first() and .parent() (and other related) selectors in their library — Zachary Kniebel, Aug 02 '12 at 18:42
Similar but not the same: [CSS shorthand to identify multiple classes](http://stackoverflow.com/questions/6893318/css-shorthand-to-identify-multiple-classes) There are a number of other questions which do ask the same thing, but they are very poorly-worded so it's pretty difficult to close this as a duplicate. — BoltClock, Aug 02 '12 at 20:16
@BoltClock: Thanks for the reference to that other question. Thoroughly rounds out the no-can-do status of this query. — rob - not a robber, Aug 03 '12 at 17:37

score 3 · Accepted Answer · answered Aug 02 '12 at 18:42

3

in jquery this:

.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3 > p:first

would translate to this:

$('.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3').children('p:first')

answered Aug 02 '12 at 18:42

Pevara

14,242
1
34
47

This worked as long as i used .find(). .children() just hit the first http://jsfiddle.net/7rMw5/ – rob - not a robber Aug 02 '12 at 19:07
`:first` is not the same as `:first-child`, which is why you're seeing different results. – BoltClock Aug 02 '12 at 19:55

score 0 · Answer 2 · answered Aug 02 '12 at 18:42

0

I don't know with CSS, but you could do it with jquery. Put all your parent classes in a selector, then state you only want a p if it's a child of the selector:

$('.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3').each( function() {
    $('p:first-child', this).css(Do whatever you want);
});

answered Aug 02 '12 at 18:42

Michael Peterson

1,123
6
14

yeah.. this is closest in the world of jQuery, but it's using .each(), which is fine... but I just wondered if it could be done with selectors only. Thanks, Michael... – rob - not a robber Aug 02 '12 at 18:46
Yeah, no worries. And there's probably a cleaner way without the .each() – Michael Peterson Aug 02 '12 at 18:50

score 0 · Answer 3 · answered Aug 02 '12 at 18:59

why not add another class to the div's you want to select like this

<div class="funny selectthis">
  <p>This is red</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

<div class="wildcrazy">
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

<div class="sad selectthis">
  <p>This is red</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
  <p>This is whatever</p>
</div>

Then just use this

$('.selectthis').find('p:first').css('color','red');

http://jsfiddle.net/U6qhb/

I can't change the HTML structure. Class nameis based on a Django slug — rob - not a robber, Aug 02 '12 at 19:08

score 0 · Answer 4 · answered Nov 22 '18 at 13:11

0

$('.funny, .sad, .another_div_class0, .another_div_class1, .another_div_class2, .another_div_class3').find('p:first')

answered Nov 22 '18 at 13:11

new2cpp

3,311
5
28
39

Targeting Same Children, but only Certain, Differing Parents -- CSS and jQuery Selector Style

4 Answers4