How to Add Style to the Parent Element when Hovering a Child Element

It is possible to style the parent element when hovering a child element, although there isn’t any existing CSS parent selector.

We’ll demonstrate and explain an example where we have a “Select” button and want to highlight the element when hovering the button. We’ll change the background color of this section when the mouse is over the button using only CSS.

We need the following pseudo markup:

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

<parent>
  <sibling></sibling>
  <child></child>
</parent>

This markup gives the sibling element the same size and position as the parent element and styles the sibling instead of the parent.

Start with creating HTML.

Create HTML

Use <p> and <button> elements inside a <div> to mark the whole section.
Use <p> and <button> elements inside a <section> to mark only the paragraph.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Marks the whole section:</p>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type 
        specimen book. It has survived not only five centuries, but also the leap into 
        electronic typesetting, remaining essentially unchanged. It was popularised in the 
        1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more 
        recently with desktop publishing software like Aldus PageMaker including versions of 
        Lorem Ipsum.
      </p>
      <button>Select</button>
    </div>
    <p>Marks only the paragraph:</p>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
        has been the industry's standard dummy text ever since the 1500s, when an unknown printer 
        took a galley of type and scrambled it to make a type specimen book. It has survived not 
        only five centuries, but also the leap into electronic typesetting, remaining essentially 
        unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 
        Lorem Ipsum passages, and more recently with desktop publishing software like Aldus 
        PageMaker 
        including versions of Lorem Ipsum.
      </p>
      <button>Select</button>
    </section>
  </body>
</html>

Try it Yourself »

Now we can style the sibling element.

Add CSS

First, style the <div> element.

Set the position to “relative”.
Add :hover to the <div> tag and specify the background property.
Set :hover and padding-bottom to the <p> element inside the <div> tag. Also, specify the background.
Set the position to “absolute” and specify the bottom for the <button> element inside the <div> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative
      }
      div:hover {
        background: #eab0ff
      }
      div p:hover {
        background: #fff
      }
      div p {
        padding-bottom: 24px
      }
      div button {
        position: absolute;
        bottom: 0
      }
    </style>
  </head>
  <body>
    <p>Marks the whole section:</p>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <button>Select</button>
    </div>
    <p>Marks only the paragraph:</p>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <button>Select</button>
    </section>
  </body>
</html>

Try it Yourself »

Our next step is to style the <section> element.

Set the position to “relative” and specify the margin-bottom.
Add :hover to the <section> tag and specify the background property.
Set :hover to the <p> element inside the <section> tag.
Set the position to “absolute” and specify the bottom for the <button> element inside the <div> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      section {
        position: relative;
        margin-bottom: 24px
      }
      section:hover {
        background: #eab0ff
      }
      section p:hover {
        background: #fff
      }
      section button {
        position: absolute;
        bottom: -24px
      }
    </style>
  </head>
  <body>
    <p>Marks the whole section:</p>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <button>Select</button>
    </div>
    <p>Marks only the paragraph:</p>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <button>Select</button>
    </section>
  </body>
</html>

Try it Yourself »

And our last step is to specify the margin-left property for the <div> and <section> elements.

div,
section {
  margin-left: 2em
}

Now, we can see the full example.

Example of styling the parent element when hovering a child element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative
      }
      div:hover {
        background: #eab0ff
      }
      div p:hover {
        background: #fff
      }
      div p {
        padding-bottom: 24px
      }
      div button {
        position: absolute;
        bottom: 0
      }
      section {
        position: relative;
        margin-bottom: 24px
      }
      section:hover {
        background: #eab0ff
      }
      section p:hover {
        background: #fff
      }
      section button {
        position: absolute;
        bottom: -24px
      }
      div,
      section {
        margin-left: 2em
      }
    </style>
  </head>
  <body>
    <p>Marks the whole section:</p>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <button>Select</button>
    </div>
    <p>Marks only the paragraph:</p>
    <section>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <button>Select</button>
    </section>
  </body>
</html>

Try it Yourself »

Result

Marks the whole section:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Marks only the paragraph:

How to Add Style to the Parent Element when Hovering a Child Element

Create HTML

Add CSS

Example of styling the parent element when hovering a child element:

Result

Related Resources