具有特定类和父级的元素的CSS选择器

Question

I want to style an element if it has a specific class and parent element. If i use caption > h1 it works perfectly, but a soon as I add my class .sub it doesn't work anymore.

HTML:

<caption>
    <h1 class="sub">Text</h1>
</caption>   

CSS:

works:

caption > h1 {
    font-weight: 500;
    color: #777;
    font-family: sans-serif;
}

doesn't work:

.sub caption > h1 {
    font-weight: 500;
    color: #777;
    font-family: sans-serif;
}

How is it possible to select elements with a specific parent and class ?

Answer 1

The > selector indicates a direct parent. Your above code .sub caption > h1 is attempting to select any h1 element that is a direct child of a caption element, where the <caption> element is a child of an element with the class .sub . It is not working because you don't have a parent of <caption> with the class of sub .

You can specify that your target elements must contain specific classes by writing the element selector immediately followed by the class selector (without a space). For example, h1.sub targets any <h1> element that has the class sub . It won't target <h1> elements that don't have the .sub class, nor elements that are not <h1> elements but do have the .sub class.

It's also important to note that <caption> is only valid as a direct child of <table> .

Essentially, what you're looking for is the following:

 caption > h1.sub { color: red; } 

 <table> <caption> <h1 class="sub">Text</h1> </caption> </table> 

This targets any <h1> element with the class of .sub that is a direct child of <caption> .

Hope this helps! :)