Selector de último hijo y último tipo en SASS

SASS también se llama hoja de estilo sintácticamente impresionante. Es un lenguaje de programación que se interpreta en CSS. El selector Last Child es un selector que permite al usuario apuntar al último elemento dentro del elemento contenedor. Este selector también se conoce como Pseudoclase estructural, lo que significa que se usa para diseñar contenido en función del contenido principal y secundario.
El último tipo de selector se utiliza para hacer coincidir la última aparición de un elemento dentro del contenedor. Ambos selectores funcionan de la misma manera pero tienen una ligera diferencia, es decir, el último tipo está menos especificado que el selector de último hijo.

Sintaxis:

Para el selector de último hijo:
```
:last-child
```
Para el último de tipo:
```
:last-of-type
```

Ejemplo: Este ejemplo implementa el selector :last-child.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title></title>
</head>
  
<body>
    <div>
        <h1>Welcome To GeeksForGeeks.</h1>
        <p>A Computer Science Portal For geeks!</p>
    </div>
</body>
  
</html>

Código Sass:

$myColor: lime
$bkc: black
$pad: 5px
p:last-child 
  color: $myColor
  background-color: $bkc
  padding: $pad

Salida: después de compilar el código fuente de SASS, obtendrá este código CSS.
Código CSS:

p:last child {
  color: lime;
  background-color: black;
  padding: 5px;
}

output 2

Ejemplo: last-of-type Un ejemplo de muestra se muestra a continuación

<!DOCTYPE html>
<html>
   
<head>
    <title>
        :last-of-type selector
    </title>
</head>
   
<body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
    <p>The fifth paragraph.</p>
    <p>The sixth paragraph.</p>
    <p>The seventh paragraph.</p>
    <p>The eight paragraph.</p>
    <p>The ninth paragraph.</p>
   
    <p>
        <b>Note:</b> Internet Explorer 8
        and earlier versions do not support
        the :nth-last-of-type() selector.
    </p>
</body>
   
</html>

Código Sass:

$bk: yellow
p:last-of-type 
  background-color: $bk

Salida:
Código CSS:

p:last-of-type {
  background-color: yellow;
}

output 3

Referencias:

Navegador compatible: los navegadores compatibles con :last-child y :last-of-type selector en SASS se enumeran a continuación:

Google Chrome 4.0
Borde 9.0
Firefox 3.5
Safari 3.2
Ópera 9.6

Publicación traducida automáticamente

Artículo escrito por pranavduggal221999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta