Selector CSS y JavaScript :has - pseudoclase Condicional

Hablaremos sobre un selector único en el ambiente CSS y JS que es de tipo condicional.

Te voy a mostrar aquí una implementación del selector de has que lo podemos emplear tanto en ccs como en JavaScript la característica principal que tenemos o la ventaja que tenemos ya que la misma me permitió resolver un problemita que tenía aquí hace varios días que no leva cómo hacerlo ya que es un selector relativamente nuevo entonces fíjate la problemática que yo tengo antes de presentarte para que demonio funciona recuerda que todo este contenido esto es el visor de libros que tengo aquí en mi aplicación de Academia en la cual puedes ver el libro desde una página html recuerda que lo que yo hice fue venir aquí archivo Descargar y descargué el archivo como una página html lo cual me dio un montón de atributos y html que era innecesario y a la final lo limpié ya eso es un tema de otro video que te había comentado y por aquí lo porté una vez todo el contenido limpio entonces y es por eso que el siguiente formato para la imagen se encuentra de esta forma porque simplemente es una herencia de la página html que descargué de Google docs en la cual está un p un SPAN:

<p><span><img src="/images/example/libros/laravel/image24.png" alt="" width="247" height="410" title=""></span></p>
<p><span>Figura 1-1: Ventana de Laravel Herd en MacOS</span></p>

Y una imagen que pudiera corregirlo sí pero de verdad que me me da ya dolor estar en esto entonces simplemente lo dejé tal cual está pero el problema es que como limpié todo el estilo en la cual en el libro también podía o lo que yo hacía quiera alinear a ver si encuentro alguno esto en un texto centrado para que esté justamente debajo de la imagen cosa que obviamente no está respetando acá porque otra vez limpié todos los atributos y clases para simplemente emplear el estilo que yo tenga definido para la imagen si ya tengo un estilo aplicado aquí por defecto y es por eso que aparece alineado pero para un texto que no se diferencia de por ejemplo este otro texto a nivel de css no pude hacer lo mismo o no podía hacer lo mismo entonces cuál es el problema o qué es lo que yo quiero hacer para ya llegar el punto yo lo que quiero es que el texto el párrafo o sea lo que sea el formato que me esté dando aquí que aquí lo puedes ver p SPAN imagen p SPAN aquí lo tenemos y todos son así pero solamente quiero este que sería el hermano de este de esta imagen lo centre es así de simple es decir aquí colocar en este caso sería a nivel del P creo que era texaline Center y ahí lo tuviéramos centrado pero es un poco más complicado de lo que aparece porque como tú lo harías bueno puede que haya otro selector realmente estoy un poquito oxidado con los selectores aquí recuerda que tenemos el de query selector otra vez los selectores tal cual te mostraba por aquí lo puedes que puedes emplear aquí en ccs también lo puedes emplear perfectamente de manera directa sin ningún cambio con con el qu selectro son equivalentes entonces vamos a ver más o menos cómo sería el procedimiento por aquí otra vez voy a referenciar lo que yo quiero son las imágenes entonces esto por cierto se encuentra en una contenedor llamado post creo que era por ahí está aquí está post para ir cerrando coloco punto post aquí tenemos el di que corresponde a todo esto pudiera cerrar un poquito más.

Funcionamiento de los selectores

Funcionamiento de los selectores tú vas cerrándolos cada vez más por ejemplo aquí yo ahora pudiera colocar bueno que quiero lo del p SPAN image p spam img img dije por los dioses y ahora por defecto Tenemos uno porque es comoo funciona el selector si colocamos el al entonces ya nos trae todos Entonces eso es el funcionamiento básico de los selectores en los cuales cada vez que tú vas colocando o vas encando aquí algo en el selector vas como que encerrándose es decir antes teníamos este era nuestro universo todo el post toda la página básicamente y a medida que vayamos colocando aquí selectores o atributos o clases lo que sea o en este caso elementos htmls tú vas cerrando tu universo con el cual tú estás trabajando es decir vas siendo más específico y esa es la problemática que yo tengo por aquí o que tenía por aquí voy a ver si lo encuentro y también es importante que obviamente te va devolviendo el último elemento que está colocando por acá anteriormente era con este zoom me está matando voy a subirle un poquito anteriormente era este par de div que son los hijos directos y ahorita es la imagen o imágenes dependiendo de cuál emplees por lo tanto devuelves otra vez el hijo directo que estamos especificando por acá cosa que es un problema para mí ya que en este punto que me está devolviendo la imagen no puede emplear el selector de hermano entonces cómo o dónde entra aquí el selector de has el selector de has lo que hace es una especie de condicional en la cual está preguntando que todos los párrafos en este caso que tengan esta imagen:

document.querySelector(".post p:has(img)")
<p><span><img src="/images/example/libros/laravel/image24.png" alt="" width="247" height="410" title=""></span></p>

Pero fíjate la diferencia de si no le colocamos el has:

document.querySelector(".post p img")
<p><span><img src="/images/example/libros/laravel/image24.png" alt="" width="247" height="410" title=""></span></p>

Has y otros selectores como el hermano

Podemos acompañar con otros selectores y esa viene siendo básicamente la funcionalidad en específico que tiene
este selector aquí otra vez fíjate que es lo mismo lo único que cambia es que aquí le coloqué el has image por lo tanto ahora esto es opcional es decir esto viene siendo la condición nos está trayendo desde el padre que en este caso es el párrafo y esa viene siendo la ventaja principal lo cual nos permite hacer como quien dice algunas consultas más elaboradas como viene siendo mi caso porque de otra forma no podía salir de la referencia que yo tengo aquí para la imagen ya que el elemento hermano:

document.querySelector(".post p:has(img)+p")
<p><span>Figura 1-1: Ventana de Laravel Herd en MacOS</span></p>

Con CSS:

<style>
.post p:has(img)+p{
  text-align: center;
}
</style>

27-12-2024 - Andrés Cruz

In english

• Categoría
• /
• HTML
• /
• Selector CSS y JavaScript :has - pseudoclase Condicional