Want to Override Child Element CSS Property by Parent Element

CSS - parent element overrides child element properties

You have 2 selectors: #main-content ul li and .footer-buttons ul li . First of them uses id and the second uses class, that's why the first one is used as more descriptive. Use:

#main-content .footer-buttons ul li { display: inline; }

How can I override a child element's style settings?

just add this CSS rule:

.custom-column > div{
    margin: 0 !important;
    padding: 0 !important;
}

If the div is not an immediate child, replace > with a blank space.

You will have to add the keyword !important after every rule because the styles are inside the div element.

Note:
But adding too much of this rule is not a good practice.

How to make parent property not override descendants

Make sure your second selector is having the same (o higher) specifity by combining it with something else. You can for example add nth-child(n) which will not change the behavior of your selector but simply increase its specificity:

.parent-class h1 {  color: red;}
.text:nth-child(n) {  color: blue;}

<h1>This should not be affected by any css</h1><div class="parent-class">  <h1 class="text">Hello</h1>  <h1>How's it going</h1></div>

Override parent's max-width from child css

You cannot override the parent styles with child styles in CSS, as there is no parent selector in CSS.

However, you don't need to override anything to give the child element a width that spans 100% of the viewport; simply use the viewport unit vw as width: 100vw:

body {  margin: 0;}
.outer {  height: 100px;  width: 200px;  max-width: 200px;  background: red;  padding: 25px;}
.inner {  height: 100px;  width: 100vw;  background: blue;}

<div class="outer">  <div class="inner"></div></div>

How to override CSS nth-child selector property from the HTML

You can't directly affect the style of the nth-child element like that, but you can set CSS variables which can be picked up when styling a property.

In this snippet a parent container can be styled inline with a --bg variable setting and this can be picked up by the settings for the nth-child(even).

.gantt-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  background-color: #fff;
}

.gantt-row:nth-child(even) {
  background-color: var(--bg);
}

.gantt-row:nth-child(even) .gantt-row-name {
  background-color: var(--bg);
}

<div style="--bg: blue;">
  <div class="gantt-row">odd</div>
  <div class="gantt-row">even</div>
</div>

---

Related Topics