How to refactor CSS based on HTML class

Question

I have two CSSs.

The first one is this:

#breadcrumbs-cool a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ccc #ccc #ccc transparent;
  left: -1em;
}

Then the next

#breadcrumbs-cool a.disable::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #eee #eee #eee transparent;
  left: -1em;
}

Notice that the only difference are class directive

a::before 
a.disable::before

And border color: #ccc versus #eee. How can I refactor these two CSS?

remove everything but the border-color in the second rule

Fabrizio Calderan
– Fabrizio Calderan

2015-10-23 07:45:57 +00:00
Commented Oct 23, 2015 at 7:45 — Fabrizio Calderan
– Fabrizio Calderan, Commented Oct 23, 2015 at 7:45
Just reuse the selectors and add in your desired styling?

Jay
– Jay

2015-10-23 07:46:34 +00:00
Commented Oct 23, 2015 at 7:46 — Jay
– Jay, Commented Oct 23, 2015 at 7:46

sailens · Accepted Answer · 2015-10-23 07:53:16Z

5

You need to keep this as is:

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ccc #ccc #ccc transparent;
  left: -1em;
}

And then just overwrite the part you want to be specific when disable class is present

#breadcrumbs-two a.disable::before{
  border-color: #eee #eee #eee transparent;
}

edited Oct 23, 2015 at 7:53

answered Oct 23, 2015 at 7:45

sailens

1,6041 gold badge18 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to refactor CSS based on HTML class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related