evt-project/evt-viewer

Using custom-style.css to style attributes and attribute values

Closed this issue · 2 comments

jtonra commented

I've been trying to use the custom-style.css file to style specific TEI elements, but I am having trouble with styling elements with specific attribute values. For instance, I want to apply different styles to <fw type="head"> and <fw type="catch"> but I haven't been able to use CSS to distinguish between the different attribute values. I've tried this method, without success:

.fw[type="head"] {
    text-align: center;
    font-variant: small-caps;
}

Can you please advise how I can use the custom-style.css file to style specific attributes and attribute values? Perhaps @ChiaraDipi?

Thank you in advance!

jtonra commented

A quick note to say that I've figured this out: using browser developer tools to identify the HTML element that <fw type="head"> is converted into: <span class="fw" data-type="head">, and using span.fw[data-type="head"] to style it from the stylesheet. Quite satisfying to figure this out on my own!

RobertoRDT commented

Hi @jtonra ! I had a hunch that it was the lack of the data- prefix causing trouble and asked the devs for confirmation, you've been way faster :)

  • 👍1