Dado un archivo HTML, debemos aplicarlo usando condiciones if-else en CSS.
No, no podemos usar condiciones if-else en CSS ya que CSS no admite lógicas. Pero podemos usar algunas alternativas a if-else que se analizan a continuación:
Método 1: en este método, usaremos clases en un archivo HTML para lograr esto. Definiremos diferentes nombres de clase según las condiciones que queramos aplicar en CSS.
- Supongamos que queremos cambiar el color del texto según el número de línea, entonces la condición if-else será:
if(line1){
color : red;
}else{
color : green;
}
- Al usar el método mencionado anteriormente, crearemos clases y luego aplicaremos CSS en ellas:
.color-line1{
color : red;
}
.color-line2{
color : green;
}
Por lo tanto, las clases anteriores se ejecutarán solo para las etiquetas HTML en las que se utilizan estas clases.
Ejemplo:
html
<html>
<head>
<title>
If-else condition in CSS
</title>
<!-- Applying CSS -->
<style>
/* First line CSS */
.color-line1{
color : red;
}
/* Second line CSS */
.color-line2{
color: green;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
If-else condition in CSS
</h3>
<span class="color-line1">This is first line</span>
<br><br>
<span class="color-line2">This is second line</span>
</body>
</html>
Producción:
Método 2: podemos usar preprocesadores de CSS como SASS , que nos permite escribir declaraciones de condición en él. Incluso si usa SASS, debe procesar previamente sus hojas de estilo, lo que significa que la condición se evalúa en tiempo de compilación, no en tiempo de ejecución.
Sintaxis:
$type: line;
p {
@if $type == line1 {
color: blue;
} @else if $type == line2 {
color: red;
} @else if $type == line3 {
color: green;
} @else {
color: black;
}
}
Para saber más sobre SASS , haga clic aquí
Para leer sobre if-else en SASS , haga clic aquí
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Sunitamamgai y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA