Set the same value to multiple properties (CSS)

Is there a w开发者_开发百科ay to set multiple CSS properties to one value?

border-left, border-right: 1px solid #E2E2E2;

The way that you can do with selectors?

.wrapper, .maindiv { ... }

---

Nope. But for your example, you can do this:

border: solid #E2E2E2;
border-width: 0 1px;

The attributes where there can be separate values for top, right, bottom, and left (eg, border-*, margin, padding) can usually be combined in a single attribute.

---

Not possible, unless you do:

border: 1px solid #E2E2E2;

..which sets the same border on all sides. If you want to control them individually, you have to write them as separate statements.

Note that in some cases, you can set multiple values for one attribute, but you can not have multiple attributes with one value in one statement.

---

Not possible with plain css, but you may have a look at scss or less who might have solutions for your problem.

A solution with plain css is the following:

border: 1px solid #E2E2E2;
border-width: 0px 1px;

---

If you're using sass, try this:

@mixin border($properties , $value){
    @each $property in $properties{
        border-#{$property}: $value;
    }
}

selector{
    @include border(left right, 1px solid #E2E2E2);
}

---

CSS does not allow such control. A workaround is to use larger rule, then restrict it:

border: 1px solid #E2E2E2;
border-top: 0;
border-bottom: 0;

But you end up with more code. Another solution is to use CSS "compiler", like SASS or Less

---

If the attributes are related, as is the case with border-left and border-right, there usually is a common attribute that allows you to set them:

border: 1px solid #e2e2e2;

On the other side, there are some libraries like Less CSS out there that extend CSS so that you can easily group related properties and attributes.