CODEWITHSUNDEEP
htmlcsscss-selectors
byteC0de
byteC0de

Reputation: 5273

I want to add css for my child class

How can I add CSS to my child of child element, i tried this code

.inactive-property {
    background-color: #e85050;
    color: white!important;
}

.inactive-property > .mng-prop-span{
    color: white!important;
}

My DOM element like

<div class="inactive-property">
    <div class="a">
        <div class="aa">
            <div class="mng-prop-span"></div>
        </div>
    </div>
    <div class="b"></div>
</div>

I want to apply css on class mng-prop-span

Upvotes: 0

Views: 53

Answers (4)

mamosek
mamosek

Reputation: 316

You can do this simply like that

.inactive-property .mng-prop-span{
    color: white;
}

It will match the .mng-prop-span class inside .inacvite-property class You do not have to use important property here.

If you want to match only those elements that are child of "aa" element inside "inactive-property" you can do this like that

.inactive-property .aa > .mng-prop-span{
    color: white;
}

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

see here jsfiddle

code :

.inactive-property {
background-color: #e85050;
color: white;
height:100px;
width:100px;
}

.inactive-property  .mng-prop-span{
color: black;
}
  1. .mng-prop-span it's not a direct child of the .inactive-property , but it's a descendant so instead of > use .inactive-property .mng-prop-span{ with a simple space between the two

2.> is a child selector that selects children that are directly under the parent

  1. i suggest you don't use !important only when it's absolutely necessary

  2. for more info click here CSS Selectors

EDIT : could you explain the downvote ? ( the one who downvoted ) . i am very curious

Upvotes: -1

Shudhansh Shekhar
Shudhansh Shekhar

Reputation: 720

    .inactive-property > .mng-prop-span{
    color: white!important;
}

The first line is not correct. > is used for a quick next child. Better you try it without >

Upvotes: 1

Quentin
Quentin

Reputation: 943185

The element that is a member of the mng-prop-span class is not a child of the element that is a member of the inactive-property. It is a great-grandchild.

Use a descendant combinator (a space: ) and not a child combinator (>).

Upvotes: 3

Related Questions