CODEWITHSUNDEEP
csscss-selectors
Sunil
Sunil

Reputation: 21416

CSS selector for a child element whose parent element has a certain class

I need to specify CSS in a style sheet file for the strong element inside a div as in code below. This strong element is inside a parent div whose class is commandBar.

<strong>Outside Div</strong>
<div class='commandBar'>
    <button class='dBtn'>Delete</button>
    <strong>My Name</strong>
    <button class='aBtn'>Add</button>
</div>

Upvotes: 35

Views: 65638

Answers (2)

Aryeh Armon
Aryeh Armon

Reputation: 2185

Descendant Selector The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

Example

div p {
    background-color: yellow;
}

http://www.w3schools.com/css/css_combinators.asp

so in your case you would use:

.commandBar strong{
/* your css style here */
}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241238

To select strong elements that are descendants of an element with class commandBar, use the descendant combinator along with a class selector:

.commandBar strong

In order to only select direct children strong elements, use the child combinator, >:

.commandBar > strong

Depending on your markup, you may also want to specify the element type that has the class .commandBar (in this case, div):

div.commandBar strong

Upvotes: 46

Related Questions