-1

Currently, I am stack with CSS. I can't understand how exactly CSS works. If I want to apply "border: 1px solid red" to a CSS parent element then it is only applied to parent element but not other elements (children) that inside this parent. But If I apply "color: red" then the color property is applied to every single child inside the parent (Including parent itself).

Example-1:

<div class="parent">
    Inside parent class
    <div class="child">Inside child class 1</div>
    <div class="child">Inside child class 2</div>
</div>

.parent {
  border: 1px solid red;
}

Example-2:

<div class="parent">
    Inside parent class
    <div class="child">Inside child class 1</div>
    <div class="child">Inside child class 2</div>
</div>

.parent {
  color: red;
}

why example-1 works for the parent element, not for children. Example-2 works fine what I expected.

Biswajit
  • 47
  • 5

5 Answers5

6

Some CSS properties "cascade" down to children elements, some don't. border is an example that does not cascade down.

More information in the MDN documentation.

Andy Ray
  • 30,372
  • 14
  • 101
  • 138
  • 6
    CSS Inheritance is different from the cascade. This is an question about inheritance of properties from a parent element to its (non-selected) children, not the cascade of properties from multiple rules to a single selected element. – Dai May 26 '19 at 18:14
  • @G-Cyr: No, they really aren't. Cascade resolution and inheritance take place separately. Even when there are special values that rattle or break the inheritance chain. At best, the cascaded value may be "inherit", which then directly leads to inheritance, but they're still two separate processes. – BoltClock Sep 02 '19 at 06:29
3

The reason behind this is with CSS property inheritance. All HTML elements have a default set of values for all CSS properties.

The color property is typically set to "inherit", therefore, child elements will inherit the parent element values for this property unless the child element explicitly has set the property to another value.

The border property on the other hand does not have "inherit" as it's default behavior therefore does not inherit parent values unless you have specifically set it too.

Hope this helps!

Andrew Xia
  • 365
  • 1
  • 11
  • Thanks a lot for your valuable answer. But how I know that Which properties are inherited by default and which aren't? – Biswajit May 26 '19 at 18:55
  • @Biswajit there is no secrets, read the doc :( – G-Cyrillus May 26 '19 at 19:12
  • The best way to know is by reading the docs. However, a good rule of thumb is anything to do with text (i.e. color, text-align, font-size, etc.) will inherit and everything else does not inherit. Of course there are exceptions so the docs is where you'll find the best info – Andrew Xia May 27 '19 at 00:06
0

Different CSS properties have different inheritance and cascade rules. You need to see the CSS specification to see how each one behaves.

In your case, you're asking why border is not inherited by child elements but color is:

Web developers and designers eventually familiarise themselves with each property and just memorize which properties are inherited and which are not.

But generally speaking (as a rule-of-thumb): if a rule affects the layout of an element (e.g. a box's dimensions, including padding, width/height, margin, position, etc) then it won't be inherited, and properties that only affect text (like color, font-family, font-weight, etc) are inherited. The edge-cases are in other properties like background-image, opacity and filter where you need to consult the spec to be sure.

Dai
  • 141,631
  • 28
  • 261
  • 374
0

In CSS, inheritance controls what happens when no value is specified for a property on an element. Refer to any CSS property definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no").

From Inheritance - CSS: Cascading Style Sheets | MDN

Not all properties are inherited by defaults, color for instance is, but border is not. You have to refer to documentations (like MDN or w3schools) to know whether a property is set to inherit by default.

You can however explicitly set an element property to inherit the value of its parent property using the keyword value inherit, like so:

.parent {
  border: 1px solid red;
}

.child {
  border: inherit;
}
<div class="parent">
  Some text
  <div class="child">Child element</div>
  <div class="child">Child element</div>
</div>

/!\ Inheritance is not to be confused with the cascade, which is the mechanism defining the style declarations applied to elements being targeted by several selectors.

Bruno Stasse
  • 212
  • 1
  • 4
  • Thanks a lot for your valuable answer. But how I know that Which properties are inherited by default and which aren't? – Biswajit May 26 '19 at 18:55
  • You have to refer to a reference of the properties you want to use, like [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) or [w3schools](https://www.w3schools.com/cssref/pr_text_color.asp), and see if it says the property is inherited or not. Usually, properties affecting text are inherited, and others are not, but that's not always the case, so you'd better check the references. – Bruno Stasse May 26 '19 at 19:02
0

Some CSS properties do not inherit the computed value of the element’s parent. You could use the inherit keyword on the child div elements’ border to let them inherit the same border as their parent

Try this:

<html>
<head>
    <title>test</title>
    <style>
        .parent {
          border: 1px solid red;
        }

        .child{
            border: inherit;
        }
    </style>
</head>
<body>
    <div class="parent">
        Inside parent class
        <div class="child">Inside child class 1</div>
        <div class="child">Inside child class 2</div>
    </div>
</body>

giuseppe
  • 11
  • 2