CSS Condicional

[renan.miranda 0]

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?

[rikaschmitt 54]

div p { color: blue; }

div p:hover { color: red; }

 

isso?

[L. Henrique 179]

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]-->