Defining CSS Properties Twice

Defining CSS properties twice

The properties defined last will override properties defined previously. Unless you use !important on the previously defined section of CSS.

.thing {
    padding: 10px;
}

.thing {
    padding: 12px;
}

.thing will have padding: 12px;

.thing {
    padding: 15px !important;
}

.thing {
    padding: 123px;
}

.thing will have padding: 15px;

This is allowed, and to more strictly answer your question, both will indeed be inherited as shown by this example:

.thing {
    padding: 10px;
}

.thing {
    background: red;
}

.thing will have both padding: 10px; and background: red;.

Also, please take a moment to read some of the comments on this answer as they raise good points worth further reading.

Is it possible to set the same CSS property twice with JavaScript?

You can call element.style.x = 'y' as many times as you want, and everytime that you call it, it will reset the css property due to the fact that it sets it inline like this:

<div style="background-color: red"></div>

If the style already exists on the element (inline) JavaScript will update the current style on the element instead of adding as a new style.

This will allow you to set the style as many times as you want, and the style that was called last on property x will be the final style.

You can see that here with this example

let div = document.querySelector('div')

let colors = ['red', 'yellow', 'green', 'blue']

let i = 0

function setColor() {

  div.style.backgroundColor = colors[i];

  div.textContent = colors[i];

  ++i < colors.length && setTimeout(setColor, 1000)

}

setTimeout(setColor, 1000)

body {

  padding: 0;

  margin: 0;

}

div {

  background-color: orange;

  width: 100vw;

  height: 100vh;

  color: white;

  font-size: 3rem;

  text-align: center;

  line-height: 100vh;

}

<div>orange - default css</div>

Using a CSS attribute twice in the same class decleration

When you write code like this the pixel value will be the fallback value for old browser.

E.g. Edge 16 will interpret the statement as:

.centerButton {
    height: 50vmin;
    width: 50vmin;
}

but Internet Explorer 9 will style in pixel units (IE9 use vm-units insted of vmin):

.centerButton {
    height: 200px;
    width: 200px;
}

When you accidentally reverse the order, the pixel-value overrides the vmin:

.centerButton {
    height: 50vmin;
    width: 50vmin;
    /* this replaces previous values */
    height: 200px;
    width: 200px;
}

Is it valid to assign a value twice to the same property within one rule?

It is valid to have multiple declarations that assign a value to a property so that the assignments apply to the same element, e.g.

h1 { color: red; }
h1 { color: blue }

Combining the declarations in the same rule does not change this.

There is no explicit statement about this in CSS specifications, so it is allowed simply because there is no rule that forbids it. Multiple declarations are very common, though mostly so that they are in different rules, often even in distinct style sheets. But they can also be used within a rule. A common technique is

 p { max-width: 25em; max-width: 60ch }

which means that older browsers that do not recognize the ch unit will use the setting max-width: 25em, whereas in newer browsers, the latter declaration takes effect.

A general rule in CSS is that all other things being equal, latter declaration wins; this is part of the cascade rules. In the case of h1 { color: red; color: blue }, all other things are equal. But in h1 { color: red !important; color: blue }, the first declaration would win.

Same CSS selector used twice

No benefit, aside from personal preference. For example, grouping things together that go together so it's easier to read or update/remove. You may have your default body styles, then some unique styles for body that you added to support a plugin or something, so you might have a separate entry for body for the unique plugin styles that you group with other styles defined for the plugin so it's easier to read/find the styles that pertain to the plugin.

It's also bad practice to write CSS like that. It uses extra space (making your files bigger) and makes cleanup and tracking down style changes more difficult.

What do these double-dash-prefixed CSS properties do?

A double leading dash is used for defining custom properties. For more information, check out this W3C Spec page.

Example from W3C:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}

How is a CSS rule evaluated, with respect to duplicate (fallback) attributes?

You are right on your assumptions. According to MDN: CSS If a browser encounters a declaration or rule it doesn't understand, it just skips it completely without applying it or throwing an error.

Read here: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

Two css files defining same class

The one loaded last (or as David points out, more accurately included last) wins in this case. Note that it's per-property though, if you load 2 definitions with different properties, the result will be the combination. If a property is in both the first and second, the last wins on that property.

The only way to ensure which is used last/wins is including the <link> elements in the order you want in the page.

For the property, here's an example:

.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css
.class1 { color: blue; margin: 2px; } //Second .css

is equivalent to:

.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; }

---

Related Topics