Using pseudo Classes in CSS

I know that pseudo classes are: :link, :visited, :hover and :active, but I would like to know if you have how to use pseudo classes through class, id or inline. Sometimes I don't want to use a :hover in all h1, only in some. How do I make such a choice?

Author: Valdeir Psr, 2018-08-26

2 answers

You can use both in specific tags, and in class, id and even tags specific to a id, for example:

p:hover{
	font-size: 20px;
}
.paragrafo:hover{
	color: #ff0026;
}
#p1:hover, #p2:hover, #p3:hover{
	font-size: 20px;
	color: #ff0026;
}
#paragrafo h3:hover{
  font-size: 10px;
}
<!DOCTYPE html>
<html>
<head>
   <title>teste</title>
</head>
<body>
   <h2>Tag</h2>
   <div>
      <p>Primeiro parágrafo</p>
      <p>Segundo parágrafo</p>
      <p>Terceiro parágrafo</p>
   </div>
   <h2>Class</h2>
   <div>
      <h4 class="paragrafo">Primeiro parágrafo</h4>
      <h4 class="paragrafo">Segundo parágrafo</h4>
      <h4 class="paragrafo">Terceiro parágrafo</h4>
   </div>
   <h2>Id</h2>
   <div>
      <h4 id="p1">Primeiro parágrafo</h4>
      <h4 id="p2">Segundo parágrafo</h4>
      <h4 id="p3">Terceiro parágrafo</h4>
   </div>
   <h2>Tag de um Id</h2>
   <div id="paragrafo">
      <h3>Primeiro parágrafo</h4>
      <h3>Segundo parágrafo</h4>
      <h3>Terceiro parágrafo</h4>
   </div>
</body>
</html>
 4
Author: Gabriel Gonçalves, 2018-08-26 02:53:53

You can use the pseudo :not to delete the class that will not be affected by :hover:

h1:hover:not(.semhover){
   background: red;
}
<h1>h1 primeiro</h1>
<h1 class="semhover">h1 segundo</h1>
<h1>h1 terceiro</h1>
 1
Author: Sam, 2018-08-26 02:40:33