Style Both Parent and Child Element in CSS

Style both parent and child element in css

If you want separate class names with the same styles, use a comma , between CSS selectors.

.brand-logo,
.wpc-logo {
  height: 100%;
}

Or you can create a common class to apply to both elements.

.common {
  height: 100%;
}

<a href="#" class="brand-logo common">
    <img src="../static/images/logo_wpc-sm.png" alt="WPC Logo" class="wpc-logo common"/>
</a>

CSS Style both Current and Children Elements

As there are not more information about your concrete project structure ...

Just staying in your code you can do:

.test,
.test *
{
   color: red;
   height: 100%;
   border-radius: 12px;
}

Note: using * is maybe not the best practice at all as it styles EVERY element (in htis case all children even second, third ... level below .test). To avoid that you can do:

.test,
.test > *
{  
   ... your code 
}

// or better more specific
// use the tag-name of the direct childs
// in this case I take 'div' as example

.test,
.test > div {
   ... your code
}

Only style one child when another child in parent exists

You could use this:

.ContentHeader hgroup h1:nth-last-child(2) { /* your code here */}

How to style multiple child elements based on parent element selector condition

Without seeing your HTML code it difficult to know exactly what will work, but this should:

#parentDiv:hover div {

}

#parentDiv:hover span {

}

With this, when the div is hovered over, the child span and div will have whatever styles you add within applied.

For example:

#parentDiv:hover div {color: blue;}
#parentDiv:hover span {color: red;}

<div id="parentDiv"><div>Div Element</div><span> Span Element</span></div>

How to style parent element based on his child

You can use the :has() pseudo class selector, although that's only supported in newer browsers. Otherwise you'll probably need to use JS.

.parent {
  background: #ccc;
}

.parent:has(.active) {
  background: steelblue;
  color: #eee;
}

/* Ignore below, for stylistic purposes only */
.parent {
  margin: 1rem;
  padding: 1rem;
  border-radius: .5rem;
  font-family: Arial, sans-serif;
}

<div class="parent">
  <div class="child">Child</div>
</div>

<div class="parent">
  <div class="child active">Child (active)</div>
</div>

Change parent div style if more than two childs are available (CSS only)

-> Please attache this code.
-> Whenever you want to apply the commaon class name in the two or more elements than you have to first count the number of common class in which you want to change the design.
-> .class-name:nth-child(number of class number)
-> Please find the following example

.outer:nth-child(1) {    border: solid 6px #f00;}.outer:nth-child(2) {    border: solid 6px #ccc;}

<div class="outer">  <div class="div1">div1</div>  <div class="div2">div2</div>  <div class="div3">div3</div></div><div class="outer">  <div class="div1">div1</div>  <div class="div2">div2</div></div>

Apply CSS styles to an element depending on its child elements

The syntax for that is:

div:has(div.a) { border: solid 3px red; }
div:has(div.b) { border: solid 3px blue; }

---

As far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.

It'd be wonderful if you could do something like div[div.a] or div:containing[div.a] as you said, but this isn't possible.

You may want to consider looking at jQuery. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.

If you use jQuery, something along the lines of this would may work (untested but the theory is there):

$('div:has(div.a)').css('border', '1px solid red');

or

$('div:has(div.a)').addClass('redBorder');

combined with a CSS class:

.redBorder
{
    border: 1px solid red;
}

Here's the documentation for the jQuery "has" selector.

Apply style to parent if it has child with CSS

You can use has():

ul li:has(ul.sub) { ... }

---

It's not possible with CSS3. There is a proposed CSS4 selector, $, to do just that, which could look like this (Selecting the li element):

ul $li ul.sub { ... }

See the list of CSS4 Selectors here.

As an alternative, with jQuery, a one-liner you could make use of would be this:

$('ul li:has(ul.sub)').addClass('has_sub');

You could then go ahead and style the li.has_sub in your CSS.

---

Related Topics