CSS Structure my code

Question

Is there a way to structure a css-file in a way like this?:

a:link {
  color: red;
  font-weight: bold;
  a:hover {
    text-decoration: none;
    font-weight: normal
  }
}

So I want a normal link to be underlined and bold, but when I hover over it, it shouldn't be underlined and bold, but it should still have the same color. (This is a simple example just for explanation)

EDIT: I am/was looking for a way without sass or less

@Dinesh Anything that can be written in Less can also be written in plain CSS; Less compiles to plain CSS after all. You cannot write it exactly like this, but there's no need to anyway. Even in Less this means something different than what OP actually wants. — deceze
– deceze ♦, Commented Aug 23, 2016 at 7:10

deceze · Accepted Answer · 2016-08-23 07:11:50Z

2

a {
  color: red;
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  font-weight: normal
}

All a elements will be red and bold. Specifically a:hover elements will also have no text-decoration and the font-weight is overridden to normal. You're not trying to deal with "parents and children" where, just with more specific states of an element.

answered Aug 23, 2016 at 7:11

deceze♦

525k89 gold badges807 silver badges954 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soyong Over a year ago

Thanks, I guess I will use this way. For the title thing, I did not know how to call it, so I thought it might be similar to the parent child association where the child has the same attributes as its parents. But I edited the title now.

MadMarc · Accepted Answer · 2016-08-23 07:12:49Z

0

There is no such thing as inheritance in CSS, but you can do :

a:link, a:hover {
    color: red;
    font-weight: bold;
}
a:hover {
    text-decoration: none;
    font-weight: normal;
}

answered Aug 23, 2016 at 7:12

MadMarc

1282 silver badges12 bronze badges

Comments

DiscoInferno · Accepted Answer · 2016-08-23 07:32:56Z

0

This was partially mentioned in the comments but I believe it deserves its own post.

You'd use SASS (or LESS, but I find the former much easier) to write out your code and then a compiler like Koala to compile it into regular CSS.

This way your code becomes:

a:link {
  color: red;
  font-weight: bold;

  &:hover {
    text-decoration: none;
    font-weight: normal
  }
}

And it will work as intended.

answered Aug 23, 2016 at 7:32

DiscoInferno

1421 silver badge10 bronze badges

2 Comments

deceze Over a year ago

&:hover will compile to a:link:hover, which is not what's intended…

Soyong Over a year ago

It is a possibility, but I was looking for a way without sass or less

Collectives™ on Stack Overflow

CSS Structure my code

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related