css child selector

selector>direct_child_element_seletor{
  rules;
}/* Answer to: "css child selector" */

/*
  Child Selector is used to match all the elements which are child
  of a specified element. It gives the relation between two
  elements. The element > element selector selects those elements
  which are the children of specific parent.

  The operand on the left side of > is the parent and the operand on
  the right is the children element.
*/

#idOfParentElement > .classOfChildElement {
  /* Your CSS Properties for the child element */
}

/* If you want to get all child elements of the parent, use "*" */

.classOfParentElement > * {
  /* Your CSS Properties for the child elements */
}

/* If you want to get all <span> elements of the parent, use "span" */

body > span {
  /* Your CSS Properties for the child elements */
}ul li { margin: 0 0 5px 0; }
ul > li { margin: 0 0 5px 0; }  p:nth-child(2)
 	{     
 		background: red;
 	}div + p {  
   color: green;  
} 
/* Answer to: "" */

/*
  In CSS, selectors are patterns used to select the
  element(s) you want to style.

  Use this CSS Selector Tester that demonstrates the different
  selectors:
  https://www.w3schools.com/cssref/trysel.asp
*/

p[title~=beautiful]:hover {
  color: orange;
}

<p title="beautifull">I can't be beautiful</p>
<p title="beautiful">Hover to make me beautiful</p>