How to apply style to parent if it has child with CSS?

We know how to apply styles to the child elements if a parent class has one. But if we want to apply a style to the parent class and that with CSS. Here’s the way we can do that. A child combinator describes a parent-child between two elements. A child combinator is made of the “greater-than (>)” character and separates two elements.


  • E > F, an F element child of an E element.
  • The following selector represents a “p” element that is child of “body”:body > p.
  • So the style In the parent class can be by just writing the name once like this
    .parent li {
  • If we want to apply the style in child class then use this
    .parent > li > ul > li {






<!DOCTYPE html>
        .parent li {
        .parent > li > ul > li {
        .parent > li > ul > li > ul >li {
    <ul class="parent">
        <li>I am first</li>
        <li>I am second</li>
        <li>I am third</li>
        <li>I am forth</li>
        <li>I am fifth
            <ul class="child">
        <li>I am sixth</li>
        <li>I am seventh</li>
        <li>I am eigth</li>



CSS3 does not have parents selectors. If CSS4 released then there is a proposed CSS4 selector, $, which will be like selecting the li element.

  • However, as of now, this code can’t be used in any of the browsers.
    ul $li ul.sub { ... }
  • In the meantime, we’ll have to use JavaScript if we need to select a parent element.
    $('ul li:has(ul.child)').addClass('has_child');

My Personal Notes arrow_drop_up

A keen learner of Computer Facts

If you like GeeksforGeeks and would like to contribute, you can also write an article using or mail your article to See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.