:link , :visited , :hover and :active , but I'd like to know if you can use pseudo classes through class , id or inline . Sometimes I do not want to use :hover on all h1 , only on some. How do I make such a choice?
You can either use% specific, tags , class , or even id specific to tags , 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> You can use pseudo :not to exclude 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>