Skip to main content
se añadieron 108 caracteres en el cuerpo
Origen Enlace
user75901
user75901

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

https://demo.com.mx/about.php#element1

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>

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

https://demo.com.mx/about.php#element1

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

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

https://demo.com.mx/about.php#element1

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>

Origen Enlace
user75901
user75901

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

https://demo.com.mx/about.php#element1

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