CODEWITHSUNDEEP
css
SIGSTACKFAULT
SIGSTACKFAULT

Reputation: 1035

Something like an If statement

In CSS, I want something like:

:root{  
    underline-all-h1-tags:true  
}  
/* it's not all h1 tags, it's actually h1-tags-with-a-bunch-of-other-things".
But for KISS reasons, we'll assume it's just all of them.*/

/* ... lots and lots of other stuff...*/

h1{  
    if(underline-all-h1-tags == true){ 
        text-decoration: underline  
    } else {
        text-decoration:none  
    }
}

Is there a way to do this? I know I could just do 

:root{h1-underline:underline}  
h1{text-decoration:var(h1-underline)}

But I am trying to make my code readable to me-in-10-years-when-I-have-totally-forgotten-how-to-CSS.

Upvotes: 1

Views: 119

Answers (2)

chharvey
chharvey

Reputation: 9326

As an alternative to Kai's answer:

h1 { text-decoration: none; }
.underline { text-decoration: underline; }

.underline is a utility class that can be used to add an underline to any element you want, including an h1. This becomes extremely scalable.

Of course I personally wouldn't name it .underline; I would probably name it something like
.u-td_u (which stands for "utility, text-decoration, underline"). The naming is your choice.

And just for kicks you could also have the other utilities available:

.u-td_n { text-decoration: none; }
.u-td_i { text-decoration: inherit; }
.u-td_o { text-decoration: overline; }
.u-td_l { text-decoration: line-through; }
/* etc ... */

Upvotes: 2

Kai Qing
Kai Qing

Reputation: 18833

why not make use of the cascading part of cascading style sheet?

h1{
    text-decoration:none;
}

.underline h1{
    text-decoration:underline;
}

Applying the class "underline" to any parent element would do the same thing that it looks like you're trying to describe above.

You could add or remove the underline class with js, or set it statically on elements you want affected.

Upvotes: 4

Related Questions