thechutrain thechutrain - 1 month ago 13
CSS Question

How do I make a CSS attribute wildcard selector over look semantic tags?

I was going through an example on a simple CSS grid layout (https://css-tricks.com/dont-overthink-it-grids/), and realized that if I had a

<article class="col-2-3"></article>
and
<aside class="col-1-3"><aside>
in the same row, my attribute selector
[class*="col-"]:last-of-type {padding-right: 0;}
was selecting both semantic tags, not just the aside.

Is there a way not to revert back to
<div>
s, and use an attribute wildcard selector for just the last type?

Answer

:last-of-type is selecting both because the types of your 2 elements is article and aside, I believe the tutorial you are using uses only div which are of the same type.

Try using [class*="col-"]:last-child if you're determined to keep article and aside.