CSS and JavaScript Selector :has - Conditional Pseudo-Class
We will talk about a unique selector in the CSS and JS environment which is conditional.
I'm going to show you here an implementation of the has selector that we can use both in ccs and in JavaScript, the main feature that we have or the advantage that we have since it allowed me to solve a little problem that I had here several days ago that I didn't know how to do it since it is a relatively new selector, then look at the problem that I have before I show you what the hell it works for, remember that all this content, this is the book viewer that I have here in my Academy application in which you can see the book from an html page, remember that what I did was come here file Download and I downloaded the file as an html page which gave me a lot of attributes and html that was unnecessary and in the end I cleaned it up because that is a topic for another video that I had mentioned to you and here I ported it once all the content was clean then and that is why the following format for the image is found in this way because it is simply an inheritance of the html page that I downloaded from Google docs in which there is a p a 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>And an image that could correct it yes but it really hurts me to be in this so I simply left it as it is but the problem is that since I cleaned all the style in which in the book I could also or what I did I want to align to see if I find any this in a centered text so that it is just below the image, which obviously is not respecting here because again I cleaned all the attributes and classes to simply use the style that I have defined for the image if I already have a style applied here by default and that is why it appears aligned but for a text that is not different from for example this other text at the css level I could not do the same or I could not do the same then what is the problem or what do I want to do to get to the point what I want is that the text, the paragraph or whatever the format is that it is giving me here that here you can see it p SPAN image p SPAN here we have it and they are all like that but I only want this one that would be the brother of this one of this image to center it is that simple that is to say here to place in this case it would be at the level of the P I think it was texaline Center and there we had it centered but it's a little more complicated than it appears because how would you do it? Well there may be another selector. I'm really a little rusty with selectors. Here, remember that we have the query selector again. The selectors just as I showed you here, you can use them here in ccs. You can also use them perfectly directly without any changes with the qu selector. They are equivalent. So let's see more or less how the procedure would be. Over here, I'm going to reference what I want are the images. So this, by the way, is in a container called post, I think it was around there. It's here, it's post. To close it, I put the post point, here we have the di that corresponds to all this. I could close it a little more.
Operation of the selectors
How selectors work you are closing them more and more for example here I could now place well that I want the p SPAN image p spam img img I said by the gods and now by default We have one because that is how the selector works if we place the al then it brings us all So that is the basic operation of the selectors in which every time you are placing or you are entering something here in the selector you are like closing yourself, that is to say before we had this was our universe the whole post the whole page basically and as we are placing selectors or attributes or classes here whatever or in this case html elements you are closing your universe with which you are working, that is to say you are being more specific and that is the problem that I have here or that I had here I am going to see if I can find it and it is also important that obviously it is returning the last element that is being placed here previously it was with this zoom it is killing me I am going to raise it a little previously it was this pair of div that are the direct children and right now it is the image or images depending on which one you use so you return again the direct child that we are specifying here which is a problem for me because at this point that it is returning the image to me it cannot use the sibling selector so how or where does the has selector come in here the has selector what it does is a kind of conditional in which it is asking all the paragraphs in this case that have this image:
document.querySelector(".post p:has(img)")
<p><span><img src="/images/example/libros/laravel/image24.png" alt="" width="247" height="410" title=""></span></p>But notice the difference if we don't put the 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 and other selectors like brother
We can accompany it with other selectors and that is basically the specific functionality that this selector has here again, notice that it is the same, the only thing that changes is that here I placed the has image, therefore now this is optional, that is to say, this is the condition that is being brought to us from the parent, which in this case is the paragraph, and that is the main advantage, which allows us to do, as they say, some more elaborate queries, as is my case, because otherwise I could not get out of the reference that I have here for the image since the sibling element:
document.querySelector(".post p:has(img)+p")
<p><span>Figura 1-1: Ventana de Laravel Herd en MacOS</span></p>With CSS:
<style>
.post p:has(img)+p{
text-align: center;
}
</style>- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter