Issue
How can I select the last paragraph <p> element, if and only its the last and lowest HTML element of the <article> element?
I don't want to use .classes or #id's.
A CSS selector should automatically find and select the <p> element.
In my demo, in the first section, the last <p> element should be selected, while in the second section the last <p> element should not be selected.
Thank you for your directions.
article p:last-of-type{
background: yellow;
}
<article>
<column>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>This paragraph should <b>NOT</b> be selected, if this would be the last paragraph on a page.</p>
<div>Text</div>
<div>Text</div>
</column>
<hr>
<column>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>This paragraph <b>SHOULD</b> be selected, if this was the last paragraph on the page.</p>
</column>
</article>
Solution
Some options for you. Main thing selecting the first article child.
article:nth-child(1) p:last-of-type {
background: yellow;
}
article:nth-child(1) p:last-child {
background: yellow;
}
article:first-of-type p:last-of-type {
background: yellow;
}
article:first-child p:nth-child(4) {
background: yellow;
}
article:first-child p:last-of-type {
background: yellow;
}
article:first-child p:last-child {
background: yellow;
}
<article>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>This paragraph <b>SHOULD</b> be selected.</p>
</article>
<br><br>
<hr><br><br>
<article>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>But this paragraph should <b>NOT</b> be selected.</p>
<div>Text</div>
<video src="/ufo landing right in the middle of a demonstration full hd footage.mpg" alt="" />
<img src="/ufo interview with human in 12k resolution.mpg" />
<div>Text</div>
</article>
Version 2:
column:last-of-type p:last-child {
background-color: yellow;
}
<article>
<column>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>This paragraph should <b>NOT</b> be selected.</p>
<div>Text</div>
<video src="/ufo landing right in the middle of a demonstration full hd footage.mpg" alt="" />
<img src="/ufo interview with human in 12k resolution.mpg" />
<div>Text</div>
</column>
<hr>
<column>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>This paragraph <b>SHOULD</b> be selected.</p>
</column>
</article>
Answered By - Kameron
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.