Jump to content
renan.miranda

CSS Condicional

Recommended Posts

Saudações amigos...

 

Eu gostaria de saber a respeito do CSS condicional, ou seja, vamos supor que eu queria mudar a cor de uma fonte, quando eu condifigurar um :hover para a div a qual ele está dentro?

Share this post


Link to post
Share on other sites

Renan,

Um CSS Condicional significa que dentro de suas classes, elas vão conter propriedades "Cross-Browsers" e serão condicionados a executar uma ação específica (como um if/else).

As condições existentes hoje em dia no CSS3 são: @media, @supports e @viewport.

Vamos entender um CSS Condicional:

/* Isso é um CSS padrão */
.classe { color: black; }
.classe:hover { color: blue; }

/* Isso é um CSS condicional */
@media screen and (max-width: 720px) {
   .classe { color: green; }
   .classe:hover { color: black; }
}

Como a própria nomenclatura diz, ele é condicional, ou seja, ele precisa ser condicionado a algo para que funcione. No primeiro caso ele não é condicionado, ele está ali e adiciona simplesmente um estilo a classe. A segunda propriedade com o @media ele está sendo condicionado a uma ação, essa de tornar a classe na cor verde SE o viewport tiver 720px no máximo.

/* Vamos a sua questão */
Sua questão está um pouco abstrata. Não da pra entender muito bem onde quer chegar ou o que quer fazer. Deixei uma condição sobre CSS condicional, pois a estrutura dele não interfere em como o :hover ou outros pseudo-elementos/classes vão interagir.

Se puder esclarecer, ficarei agradecido em ajudar novamente.

Obs.: Hoje em dia o CSS condicional não é mais tão necessário em questões cross-browser, já que o CSS3 tem dado conta de muitas coisas sozinho. É interessante pra quem tem que fazer projetos que englobem até o IE8 ou anterior, ai no caso seria necessário criar pro exemplo um <!-- [if lt IE 8]> e dentro dele chamar um novo CSS específico.
Ex.:

<!-- LT refere-se a "Less than (menores que)">
<!--[if lt IE8]>
   <link rel="stylesheet" href="css/estilo-para-ie8.css">
<![endif]-->
  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.