Apply CSS Styles to an Element Depending on Its Child Elements

Apply CSS styles to an element depending on its child elements

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');

$('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 CSS styles to an element depending on its child elements - ONLY CSS

You can't select a parent element from inside any of its descendants.

However you can make an item looks like selected. The trick is to add position: relative on outermost parent and use :before or :after pseudo element on the child element.

Here is the css code:

.chatrow_1 {
  position: relative;
}

[data-user="1"]:before {
  background: skyblue;
  position: absolute;
  z-index: -1;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.chatrow_1 {  position: relative;}
[data-user="1"]:before {  background: skyblue;  position: absolute;  z-index: -1;  content: '';  bottom: 0;  right: 0;  left: 0;  top: 0;}

<div id="chat">  <p class="chatrow_1">    <span class="time">      01:41:55    </span>    <span class="user-msg">      <span class="c-avatar">        <img src="" alt="Image Description" />      </span>      <span class="user">        <strong>          <span class="chat-username" data-user="1">            Anonymous_001          </span>        </strong>      </span>      <span class="msg">        <span class="chat-msg">Hello</span>      </span>    </span>  </p>  <p class="chatrow_1">    <span class="time">      01:41:55    </span>    <span class="user-msg">      <span class="c-avatar">        <img src="" alt="Image Description" />      </span>      <span class="user">        <strong>          <span class="chat-username" data-user="2">            Anonymous_001          </span>        </strong>      </span>      <span class="msg">        <span class="chat-msg">Hello</span>      </span>    </span>  </p></div>

Apply CSS Style to child elements

This code "div.test th, td, caption {padding:40px 100px 40px 50px;}" applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements.

It is not the same as "all td, th and caption elements which are contained by a div element with a class of test". To accomplish that you need to change your selectors:

'>' isn't fully supported by some older browsers (I'm looking at you, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

How do I apply a style to all children of an element

As commented by David Thomas, descendants of those child elements will (likely) inherit most of the styles assigned to those child elements.

You need to wrap your .myTestClass inside an element and apply the styles to descendants by adding .wrapper * descendant selector. Then, add .myTestClass > * child selector to apply the style to the elements children, not its grand children. For example like this:

JSFiddle - DEMO

.wrapper * {    color: blue;    margin: 0 100px; /* Only for demo */}.myTestClass > * {    color:red;    margin: 0 20px;}

<div class="wrapper">    <div class="myTestClass">Text 0        <div>Text 1</div>        <span>Text 1</span>        <div>Text 1            <p>Text 2</p>            <div>Text 2</div>        </div>        <p>Text 1</p>    </div>    <div>Text 0</div></div>

apply css style only by gien child elements

your guess is right, use li:last-child and you are good to go.
Or you can complicate your life with something like:

li::not(:last-child)

Changing all child elements style using inline CSS

You can do it like this

<div style="font-family:'Segoe UI'">
  .....
</div>

it takes effect in all children inside the div.

Can I use CSS to apply styles based on child element count?

You can't specify it on the parent (DIV.items), but you can on the child (DIV.item) with the :only-child pseudo-class. Since you're styling a descendant of the child here, what you're looking to do is in fact possible:

DIV.item:only-child BUTTON.delete {
    display: none;
}

Avoid css styles applying to child elements

CSS are meant to be inherited like that. If you want to "not inherit" you have a few options:

Best: improve your selectors so that they only apply to the elements you need them to
Good: if existing markup does not allow you to do the above, help by giving the element(s) that need to be styled an additional attribute (e.g. extra class) that allows you to improve the selectors
Bad: write your selectors so that they apply globally, then write more selectors to "undo" the results on a case by case basis

In your case, it looks like a combination of the first two would work. You can give an id="foo" to your table and then change the selector to

table#foo > tbody > tr { /*...*/ }

The > is the child selector, which prevents the style from being applied to table rows further down the element tree.