Trigger HTML child by interacting with it's parent using pseudo classes

html-triggers.md

Trigger HTML child by interacting with it's parent using Pseudo classes

<div class="myDiv">
  
  <h2 class="myTitle">Title</h2>
  <h2 class="newTitle">Title2</h2>
  
</div>

What I want to do is make is paint heading 'myTitle' to red color when user hover's over it's parent, in this case 'myDiv'. First thing we do is style the parent div

.myDiv{
  height: 100px;
  width: 100px;
  border: 2px solid black; 
}

Now comes the trick. We give 'myDiv' psuedo class hover and then we type name of the class, id or tag name we want to trigger using our pseudo class of choice, in this case hover:

.myDiv:hover .myTitle{
  color: red;
}

Whenever user hoves over myDiv, parent element, it's child myTitle will have text with color red. Like with regular :hover, this only works while cursor is over desired element. It can be used with all other pseudo classes.

It's a good trick to highlight text and / or other tags, without needing to hover over that same text or any other tag we want to change.