Simbolo # en CSS ¿Que es?

[[Delphius]]

Buenos dias, buenas tardes, y/o buenas noches

He tratado de esclarecerme una duda... una duda que ya no soporto... me tiene mal. ¿Cuando, como y para que se usa el símbolo # en un CSS?

He visto CSS por todos lados... muy variados. Algunos trabajan con el #, otros no...

En los que he visto eso hacen algo como:

Código PHP:

#algo {bla bla bla... } 


Y en el código HTML hacen, por ejemplo...

Código PHP:

<etiqueta id="algo"> 


Tengo entendido, por lo que he leído entiendo, en lo poco que se, que es para establecer un estilo a un elemento a identificar mediante la cláusula "id" ¿Que otra utilidad oculta hay en realizar esto? ¿Tiene algún otro fin?

¿En que se difiere eso de esto?:

Código PHP:

.algo {bla bla bla} 


Código PHP:

<etiqueta class="algo" id="algo_id"> 


Buscando y buscando llego a distintos enlaces que lo único que hacen es copiarse entre ellos. Sobre todo la mayoría se copia de aquí

A mi no me queda demasiado claro el asunto. Les agradecería si alguien me pudiera explicar bien o darme alguna referencia confiable en donde se exponga el tema.

Muchas gracias.

[[xEsk]]

Espero no engañarte, pero cuando es "id", este no puede repetirse en la misma página HTML, o sea que es un identificador único para el objeto, es entonces cuando se usa el #.

Al menos yo lo uso así, xDD cuando sé que un objeto (cabecera, menú, pie de pagina, etc...) será único en mi página, y que no habrá otro con el mismo identificador, entonces en el CSS le defino como #nombre { ... }. En cambio los objetos como títulos y otros que se pueden repetir (usar varias veces en la misma pagina) en el CSS los defino como .nombre { ... }

No sé si me he expresado bien, pero... espero que te sirva, xD

Saludos.

[dec]

Hola,

En pocas palabras... no soy el más indicado, pero, en fin. Los distintos elementos pueden especificar un "ID" y una o varias "clases". El "ID" de un elemento ha de ser único en el documento, las clases pueden "repetirse". Por ejemplo, esto es válido:

Código PHP:


<div class="derecha">
 ...
</div>

<div id="contenido">
 ...
</div>

<div class="derecha" class="negrita">
 ...
</div> 


Esto otro no sería válido, no es que se fuera a parar el mundo, pero, podría causar problemas:

Código PHP:


<div class="derecha">
 ...
</div>

<div id="contenido">
 ...
</div>

<div id="contenido">
 ...
</div>

<div class="derecha" class="negrita">
 ...
</div> 


Como ves hay dos elementos con "ID contenido", y si es que recuerdo bien lo que leí hace años ya, los identificadores no pueden repetirse, como por otro lado parece lógico.

Ahora bien, ¿para qué todo esto? Huy... Pues, por ejemplo, para dar el estilo correspondiente a los distintos elementos basándonos en sus clases y sus identificadores. Hablo de las hojas de estilo en cascada.

Pero, también para trabajar con JavaScript. JavaScript puede localizar elementos "identificados" y "clasificados". E iba a seguir hablando de CSS y de "selectores" y... pero, sólo para picarte la curiosidad y que te hicieras con un buen par de libros.

Realmente yo de momento estoy ahí, con identificadores y clases... comienzo a usar tímidamente algunos "selectores" muy sencillos, pero, cosas como "XPath" me pillan muy lejos. Y no digo nada, que luego todo se sabe. Espero por lo menos haberte ayudado algo. Si necesitas otra cosa, ya sabes: usa el **** google. Es broma.

Se me olvidaba... pásate por SIDAR.org. Publican traducciones de especificaciones y documentación varia que puede resultarte interesante.

[[Delphius]]

De que el ID es único eso lo tengo claro...

Entonces... cuando uno hace en un CSS algo como esto:

Código PHP:

#Estilo_unico_para_un_identificador {
} 


¿Lo que hace es definir un estilo para un único identificador en particular con lo que #Estilo-unico_para_un_identificador sólo podrá ser usado UNA Y SOLA UNA VEZ?

Si eso eso listo, duda evacuada. Sino a seguir quemando pestañas.

Ya me pongo a ver el enlace.
Muchas gracias por tomarse su tiempo, paciencia que me tienen y por aceptar estas preguntontas de mi parte.

Saludos,

[dec]

Hola,

[delphius]
¿Lo que hace es definir un estilo para un único identificador en particular con lo que #Estilo-unico_para_un_identificador sólo podrá ser usado UNA Y SOLA UNA VEZ?
[/quote]

En un mismo documento así es, sólo podrás identificar unívocamente a un determinado elemento una sóla vez...

Ahora bien. Eso no quiere decir que un identificador se tenga que usar en un determinado tipo de elemento. Tú puedes escribir algo así en tu hoja de estilo:

Código PHP:


ul#fallogordo {

} 


Con lo que estás trabajando en una "lista desordenada" con ID "fallogordo", o bien puedes no especificar el tipo de elemento de que se trate:

Código PHP:


#fallogordo {

} 


Ahora trabajarás sobre un elemento identificado como "fallogordo"; igual da que sea un "input", un "lista", un contenedor, un párrafo... etc.

Pero, ¿de eso se trata no? Si quieres trabajar con varios elementos a la vez puedes usar clases:

Código PHP:


.fallogordo {

} 


Para trabajar con todos los elementos de la clase "fallogordo". Sean cuales sean, recuerda, porque puedes también hacer lo de antes, pero, con clases:

Código PHP:


ul.fallogordo {

} 


Por supuesto, ya sabes que con los propios elementos puede trabajarse sin necesidad de clase alguna:

Código PHP:


ul {

} 


O lo dicho más arriba, usar, por ejemplo, los atributos de algunos elementos:

Código PHP:


input[type=button] {

} 


Y mezclar y agitar a tu gusto:

Código PHP:


div#contenido form input[type=button] {

} 


En definitiva, hay muchas posibilidades... para nada el asunto del "identificador" es un problema, justamente, permite identificar unívocamente a un elemento. Es su cometido. Pero hay otras formas de tratar con los elementos. Algunas las has visto ya, a las otras... (XPath, selectores) como que no llego.

[[Io]]

Hola.

Pues básicamente voy a repetir lo que ha dicho dec.

He utilizado los #id, para personalizar algunos elementos.
Por ejemplo:

  <ul>
    <li>Item nº1</li>
    <li>Item nº2</li>
    <li>Item nº3</li>
   </ul>

Esto sería una lista estandar. Per me gustarias que no se vieran los dibujitos que salen a la izquierda, y que el color de las letras fuera azul, entonces me creo un selector con esta características en la hoja de estilo o en la cabecera entre etiquetas <style></style>:

  #miLista
{
  list-style:none;
  color:blue;
}

y ahora en la página definiría de esta forma la lista:

  <ul id="miLista">
    <li>Item nº1</li>
     <li>Item nº2</li>
     <li>Item nº3</li>
   </ul>

Con las clases pues algo parecido.

Imaginate que la lista tendría un color de fondo en función de su contenido. Por ejemplo cuando los items son números romano, el fondo es de color verde.

  #miLista
 {
   list-style:none;
   color:blue;
 }

   #miLista.NumerosRomano
 {
   background-color:green;
 }

y ahora en la página definiría de esta forma la lista:

   <ul id="miLista">
     <li>Item nº1</li>
      <li>Item nº2</li>
      <li>Item nº3</li>
    </ul>

  <br>

   <ul id="miLista" class="NumerosRomano">
      <li>Item nºI</li>
       <li>Item nºII</li>
       <li>Item nºIII</li>
        <li>Item nºIV</li>
   </ul>

Aunque una clase, tambien se puede crear de forma independiente, a un indentificador.

  .BordeAncho1pixel
  {
    border-width:1px;
  }

Y se podria utilizar en cualquie elemento de bloque;

  <table class="BordeAncho1pixel">
     .....
     ----
 
  </table>

Bueno espero no haber liado mucho.

Chao.