How can I use sequence numbers or random numbers in CSS selector

Question

I want to style a specific H4 tag, those are added as widgets on blog post pages, therefore I use the CSS selector, but I'm struggling to get it work

This is what I want to happen:

#post-RANDOMNUMBER > div > div.awac-wrapper > div > h4 {
    font-size: 20px;
}

Something I've tried but obviously it does not work

#post-(n) > div > div.awac-wrapper > div > h4 {
    font-size: 20px;
}

Can you show us your html? Can you add / change the classes on those posts? — Boguz, Nov 30 '22 at 09:59
you can select via [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). If you add your Html too we can help — Sfili_81, Nov 30 '22 at 10:01
@Boguz An example of the rendered HTML can be found on this page: https://adrianysus.com/en/wine-with-sushi/ scroll down of the blog post till you see 'Subscribe to our newsletter' — Zibizum, Nov 30 '22 at 10:08
Please do not refer us to external pages, their content could change at any point in the future, making this question lose context. Add the relevant information directly into your question. — CBroe, Nov 30 '22 at 10:25
Is there a reason why you want to use the `#post-...` id selector instead of simply using the `.post` class selector? — Boguz, Nov 30 '22 at 10:41
@Boguz not, but that was what Chrome gave me in the Chrome Console. Open Chrome Console > [right mouse click] > Copy > Copy selector — Zibizum, Nov 30 '22 at 10:46
ah, ok. you could try something like `.post .awac-wrapper h4 { ... }` or even `.post .widget-title { ... }` — Boguz, Nov 30 '22 at 12:05
Thank for the tip. The answer that Fabrizio gave works like a charm: `[id^="post-"] > div > div.awac-wrapper > div > h4 { font-size: 20px; }` — Zibizum, Nov 30 '22 at 12:41

score 1 · Accepted Answer · answered Nov 30 '22 at 10:14

1

If you need to select an id attribute with a random suffix, you could use an attribute selector starting with post-, like:

[id^="post-"] > div > div.awac-wrapper > div > h4 {
    font-size: 20px;
}

answered Nov 30 '22 at 10:14

Fabrizio Calderan

1 Answers1