Css to Prevent Child Element from Inheriting Parent Styles

How do I prevent CSS inheritance?

As of yet there are no parent selectors (or as Shaun Inman calls them, qualified selectors), so you will have to apply styles to the child list items to override the styles on the parent list items.

Cascading is sort of the whole point of Cascading Style Sheets, hence the name.

How to not inherit CSS styles from parents?

Some ways to work with or prevent CSS inheritance:

1. The most obvious way would be to remove the jumbotron css and write your own.

2. Secondly, you could try to change the CSS to be more specific. For example using advanced css selectors IE: .jumbotron > .childClass. Or stuff like + :not() :first-child :last-child (and others). Depends on your use case. See advanced selectors.

Or if you don't want to modify or change the CSS of the parent class. Then another option would be to override it with a higher parent. For example...

<div class="jumboTronParent">
  <div class="container">
    <div class="jumbotron">
      <div class="myChildClass"></div>
    </div>
  </div>
</div>

.jumboTronParent .jumbotron > .myChildClass {
  font-size:1em;
  // applies font style to just first level children with this class
}

.jumboTronParent .jumbotron .myChildClass {
  font-size:1em;
  // applies font style to all children with class
}

Prevent CSS inheritance to children of the selected element

Some CSS properties are inherited and you can't prevent that.

Inheritance propagates property values from parent elements to their children.

Some properties are inherited properties, as defined in their
property definition table. This means that, unless the cascade results
in a value, the value will be determined by inheritance.

However, you can override that by selecting the children and restoring the desired value.

.wrapper > ul:first-child > li:last-child {  color: red;}.wrapper > ul:first-child > li:last-child > * {  color: initial;}

<div class="wrapper">  <ul>    <li>Lorem</li>    <li>Ipsum</li>    <li>Dolar</li>    <li>Style me!      <ul>        <li>Lorem</li>        <li>Don't style me!</li>      </ul>    </li>  </ul></div>

.nav .current .dropdown-content a:before,
.nav .current .dropdown-content a:after { display: none; }

 .contentContainer {  display: flex;  flex-direction: column;  margin-bottom: 15px;  align-items: flex-start;}
.text {  border: 1px solid black;}

<div>  <div class="contentContainer"><div>  <div>Title</div>  <div>Posted by u/user1</div></div>  <span class="text">  Text</span>  </div></div>

 body { width: 300px; }
 div  { width: auto;  }

.vjs-matrix .vjs-progress-control:hover .vjs-progress-holder .vjs-load-progress div.vjs-fs-note > div.vjs-fs-note-text-container-above {
   font-size: 10px;
}