Css change child css using parent class

This is how I solved it I had to move the white background color from whitebackground class to new class called newwhitebackground class. Then adjust the css accordingly, as in the snippet below: Solution 3: If you’re looking to just change the colors of the cells, you could toggle the class of the and then use CSS selectors on the cells like the following: Solution: Simple answer, NO (ish) However, assuming you want to do this for styling purposes only (and not DOM manipulation) if you look at the logic of what you’re trying to accomplish- you are trying to replace one class with another when you hover.

How to change child classes by changing only the parent class?

Yes it’s possible you just need a css class for the table to do it and a function to toggle this class with your table.

This is how should be your css defined:

And this is the JS function to toggle it in the table:

This is an updated Demo :

function cSwap(cell) < if (cell.className == "t") cell.className = "t2"; else if (cell.className == "t2") cell.className = "t"; >function tableCreate(n) < var body = document.getElementsByTagName('body')[0]; var tbl = document.createElement('table'); tbl.setAttribute('onclick', 'cSwap(event.target)'); for (var i = 0; i < n; i++) < var tr = document.createElement('tr'); for (var j = 0; j < n; j++) < var td = document.createElement('td'); tr.appendChild(td) td.classList.add('t'); >tbl.appendChild(tr); > body.appendChild(tbl); >function changeClors() < var cells = document.getElementsByTagName('td'); for (var i = 0; i < cells.length; i++) < cSwap(cells[i]) >> tableCreate(5);function toggleClass() < var table = document.querySelector("table"); if (table.className !== "myTable") < table.className = "myTable"; >else < table.className = ''; >>

Instead of using the for loop, try toggling the invert class name on the table element. Then adjust the css accordingly, as in the snippet below:

function cSwap(cell) < if (cell.className == "t") cell.className = "t2"; else if (cell.className == "t2") cell.className = "t"; >function tableCreate(n) < var body = document.getElementsByTagName('body')[0]; var tbl = document.createElement('table'); tbl.setAttribute('onclick', 'cSwap(event.target)'); tbl.setAttribute('id', 'myTable'); for (var i = 0; i < n; i++) < var tr = document.createElement('tr'); for (var j = 0; j < n; j++) < var td = document.createElement('td'); tr.appendChild(td) td.classList.add('t'); >tbl.appendChild(tr); > body.appendChild(tbl); >function changeClors() < var table = document.getElementById('myTable'); table.classList.toggle('invert') >tableCreate(5);

td < border: 1px solid black; border-collapse: collapse; padding: 28px; >.t < background: white >.t2 < background: black >.invert .t < background: black >.invert .t2

If you’re looking to just change the colors of the cells, you could toggle the class of the table and then use CSS selectors on the cells like the following:

.table-dark td < background-color: #000; >.table-light td

CSS element>element Selector, The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent,

The closest thing we have to a CSS parent selector

It doesn’t work in all use cases, but it’s really underappreciated, so I thought it would be fun to look at what it is and how it works 🙂 If

Changing class of an child element on hover of parent using CSS

Simple answer, NO (ish)

However, assuming you want to do this for styling purposes only (and not DOM manipulation) if you look at the logic of what you’re trying to accomplish- you are trying to replace one class with another when you hover.

Is this not the same as doing, e.g.:

.parentClass:hover .childClass, .hababa < /* this means that the child class styling matches hababa on hover */ >

The above basically accomplishes the same thing as removing one class in favour of the other- with the exception of not removing any styling rules that the child class has which hababa does not, so arent overwritten.

In which case you will also need a rule to reset these, e.g.:

.parentClass:hover .childClass < /* remove any rules not shared with hababa */ >

Demo Fiddle

Override child class css with parent class css, Your selector was slightly wrong, remove the > so it just reads .wrapper * this will get all children of the wrapper.

Skip Parent Background in Child class while inherit other properties

You could try to change the CSS to the following

.child < font-size: 2rem; text-align: center; >.bluebackground < font-size: 3rem; >.whitebackground < background:white; color:yellow; >.bluebackground, .child

Working example: Stackblitz

Update

There is a dirty way to include the CSS selectors from the app component to the child component.

import < Component, OnInit >from '@angular/core'; @Component(< selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css', '../app.component.css'] // ) export class TestComponent implements OnInit < constructor() < >ngOnInit() < >> 

Now you could use the bluebackground selector in the test component.

BlueBackGround Start 
 Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class