CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-elementpseudo-class
john c. j.
john c. j.

Reputation: 1185

Only-child pseudo-class for first-line pseudo-element

Is there a way to avoid the "red highlight" in the last example?

Live Demo

<h3>should be:</h3>

    <div class="demo">
    <p>foo foo</p>
    <p>bar bar</p>
    </div>

<hr>

    <div class="demo">
    <p>foo foo<br>foo foo</p>
    <p>bar bar</p>
    </div>

<hr>

    <div class="demo">
    <p>foo foo<br>foo foo</p>
    </div>

<h3>should not be:</h3>

    <div class="demo">
    <p>foo foo</p>
    </div>

This is what I currently use:

.demo p:first-child::first-line {
    color: red;
}

But, it highlights all examples, including the last one. I also tried these two:

.demo p:first-child::first-line:not(:only-child) {
    color: red;
}

/* and... */

.demo p:first-child::first-line:not(:only-of-type) {
    color: red;
}

But it seems it just brokes all the highlight in all demos.

Is there way to achieve the desired result? (Remove "red highlight" from the last example).

(JS/jQuery solution is also ok, but, if it could be solved with CSS, it would be much better).

Screenshot with desired result:

enter image description here

Upvotes: 0

Views: 375

Answers (3)

max
max

Reputation: 8667

I have a solution in jQuery.

CSS:

.demo p:first-child:first-line {
  color: red;
}
.demo .not-red:first-line {
 color: green !important;
}

JS:

$('.demo p:only-child:not(:has(br))').each(function() {
  $(this).addClass('not-red');
});

JS will add not-red class only to paragraphs that doesn't contain br tags and paragraphs that are only child.

CODEPEN

Upvotes: 1

Toby
Toby

Reputation: 13385

One way to achieve this is to set the color on :first-child and then override with :only-child:

.demo p:first-child::first-line {
    color: red;
}

.demo p:only-child, .demo p:only-child::first-line {
  color: inherit;
}

Example: https://jsfiddle.net/4s42cnrL/4/

Upvotes: 1

Sanchit Goel
Sanchit Goel

Reputation: 141

please use 

.demo:not(:last-of-type) p:first-child::first-line {
    color: red;
}

https://jsbin.com/doqenagapa/4/edit?html,css,output

Upvotes: -1

Related Questions