Use of Pseudo Classes in CSS

Asked

Viewed 62 times

1

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

css css3 web-application pseudo-classes

2 answers

4


You can both use in tags specific, as 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>

  • Got it, thanks a lot for the help .

1

You can use the 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>

  • Okay, thanks for your help .

  • You’re welcome. Antonio, when you ask a question and receive answers, it is important to always try to mark in only 1 answer so that your question is given as solved. From what I’ve seen in your history, you’ve asked four questions and in no one have you chosen an answer. The site system looks like this: you ask a question, get one or more answers, choose the one you think is best and mark it. You can also vote on the answers if you think they were helpful.

Browser other questions tagged css css3 web-application pseudo-classes

You are not signed in. Login or sign up in order to post.