Apply CSS Style to Child Elements

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 to child element

you can just use .test input (which will apply to every input in <div class="test">).

Your CSS with > only selects direct descendants

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)

CSS styling a child element from a parent element using selectors

You can use :nth-child() property of CSS! Try below-given code. I'm also attaching the link for working CodePen. To understand how it works you can play with it!

Visit the pen for more understanding and live demo: https://codepen.io/CUManiar/pen/vqGdze

.grand-parent {  color: blue;}
.grand-parent h2:nth-child(4) {  color: red;}
.grand-parent .parent p:nth-child(2) {  color: pink}

<div class="grand-parent">   Hi I am grandparent.     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am grand child. </p>          <p class="child"> Hi I am 2nd grand child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 2nd child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 3rd child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 4th child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 5th child. </p>     </h2></div>

do not apply css style to child elements

To cater fully for both this default markup and browsers which correctly add a tbody where it isn't already specified you'd need to use:

body > .xTable > table > tr > td > .xTable,
body > .xTable > table > tbody > tr > td > .xTable {
    ...
}

JSFiddle example.

This assumes that your first <div class="xTable"> has no parents other than <body>. If this isn't the case then replace body with your parent.

Why does my division styling style 2 child elements even though i placed a first-child tag?

You css isn't working because both of your img elements are the first child inside of their parent.
What you maybe want is to add a margin to the image inside of the first column.

Something like

    .column:first-child img {
        margin-left: 100px;
    }

Without seeing the rest of your html i cannot know if this will work correctly. It will only work if the first column is indeed the first child inside its parent.

Another solution would be for you to add classes to your images, something like

<div class="column">
    <div class="center">
        <img class="image image--with-margin" src="assets/images/images/crop-1.png">
    </div>
</div>
<div class="column">
    <div class="center">
        <img class="image" src="assets/images/images/sliced-2.png">
    </div>
</div>

and then

.image--with-margin {
    margin-left: 100px;
}

Apply style to child elements with LESS

What you have for your LESS should work. It compiles to this CSS:

.layoutList {
  background-color: #CFCFCF;
}
.layoutList .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}

The only thing missing is if you want the child combinator as your example shows, then you need to tweak your LESS to this (where the > was added):

.layoutList {
    background-color: #CFCFCF;
    > .entityCard.hover {
        background-color: #FFFFFF;
        border: 1px solid yellow;
    }
}

Which will then output this:

.layoutList {
  background-color: #CFCFCF;
}
.layoutList > .entityCard.hover {
  background-color: #FFFFFF;
  border: 1px solid yellow;
}

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
}