La pseudo-clase target
apunta a un elemento del DOM específico a través de su identificación en la URL por medio de un id
, por ejemplo
El cual dentro del documento HTML se represnta así
<a href="#element1">Elemento 1</a>
<p id="element1">Este es un párrafo</p>
Y dentro del CSS para poderle aplicar estilos lo harías de este modo
p#element1:target{ color: red; }
Entonces con este fragmento de código:
#cookiesms1:target {
display: none;
}
Le estás indicando que apunte a un elemento con el id=cookiesms1
para ocultarlo cuando lo identifique como parte del cuerpo de la URL al final https://demo.app.com/index.php#cookkiesms1
, cuando le quitas la seudo-clase entonces ya no esta apuntando a dicho elemento
Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
p#element1:target{
color: red;
}
p#element2:target{
color: steelblue;
}
</style>
</head>
<body>
<a href="#element1">Elemento 1</a>
<a href="#element2">Elemento 2</a>
<p id="element1">
Elemento párrafo 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dolorum reprehenderit asperiores, officia possimus sequi expedita, magni quidem distinctio officiis consequuntur nemo neque atque. Omnis, et iste nihil ab alias?
</p>
<p id="element2">
Elemento párrafo 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius aperiam quia blanditiis reprehenderit eos, porro quidem totam quod provident. Iusto modi autem voluptate, maxime, suscipit voluptas consequuntur aliquam voluptatum facilis!
</p>
</body>
</html>