Conditional CSS: if a selector contains another selector?

Question

On a page, I have two paragraphs, both of which are identified via .entry p selector. However, the first one also includes a timestamp, which is marked with .time selector – the code looks like this:

<div class="entry">

    <p><span class="time">17:25:22</span> Sed ut perspiciatis, unde omnis iste natus.</p>

    <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit?</p>

</div>

Now, is it possible apply different rules to those two paragraphs without introducing new selectors? Like, because of the condition that the first one contains this span class="time", and the second one does not?

Answer 1

You could use :first-child, in the entry div if the first p is always going to contain a time, then you could just target the first p in the div.

For example:

.entry p:first-child {
 css here
}

or using Jquery:

$('.entry p .time').parent().addClass('p-class');