So far, we've used tags, attributes,
and strings to search for elements within our parse tree.
You can also search for elements using CSS selectors.
And that's what we'll do here in this demo.
When you install Beautiful Soup using a pip install,
you also get along with it the Soup Sieve package in Python.
The Soup Sieve Python package is a CSS selector library to provide selecting,
matching, and filtering your HTML content using CSS class selectors.
Once you install and import the Beautiful Soup library,
you don't need to do anything extra to use Soup Sieve.
Open up the TomJerry_WithImages.html file and instantiate a soup object.
If you want to use CSS selectors to select your HTML content,
you can simply invoke the select function on your soup object.
You can specify tags within soup.select to perform CSS selection using tags.
Here is the title tag from our HTML page.
We'll use soup.select once again.
This time I want to find p elements, but I want the first p element,
nth-of-type(1).
This will select the first paragraph tag that exists within my HTML.
What if you want the second paragraph tag?
Well, you simply say soup.select p:nth-of-type, and in brackets (2).
This selects the second p tag within my HTML content.
When you use tags as your CSS selectors,
soup.select acts like the find_all function.
Soup.select ("a") will find all a tags within your document.
Similarly soup.select ("i") will find all i tags within your document.
Our document contains exactly one.
CSS selectors are much more powerful though than simple tag specifications.
You can specify a hierarchy of tags to look for a specific
element nested within other elements.
Here I look for the a element which is nested within a p
element which is nested within the body.
This selects four anchor tags within my HTML content.
The anchor tags are within a paragraph element,
and the paragraph element is the child of the body.
It's not necessary though that the a is a direct child of the p element,
and the p is a direct child of the body element.
Let's see another example.
I want to find all a elements which are nested within a body element.
The a element need not be a direct child.
And all of the four a elements from earlier will be matched.
You can try this out with a few more examples.
Here select the title element that occurs somewhere under the head element.
Here is the title element that happens to be the
direct child of the head element.
Let's try this once again.
Select a b element which is nested somewhere under the body element.
The b element here is not a direct child of the body element,
but it's still selected.
Let's confirm that this is indeed the case.
I'm going to select the b element that occurs somewhere under the body element,
access the element, and access the parent of that element.
Observe that the immediate parent of the b element is a paragraph tag.
If you want your selectors to apply only to direct children,
you need to use this greater than sign or the angular bracket.
This selection will select only those title tags
which are directly under a head tag.
This applies to our single title tag within this HTML.
Let's try this once again.
Find only those image tags which are directly under the body tag.
And of the image tags found, return the second image tag.
That's what the CSS selector tells us.
This returns nothing.
All of our images are within an outer div element.
They are not directly under the body element.
Here is a selector that will match the image tags.
Find an image tag which is directly a child of a div.
The div should be directly the child of the body tag,
and I want the second image in sequence.
The selector will match all image tags which are contained
within our HTML and return the second image.
CSS selectors can allow you to select elements using tag names using IDs,
as well as class names.
The tilde in the selector specifies sibling elements.
Here's what the selector is looking for.
Find an element which is a sibling to the element which has the ID link1.
And the sibling element should have the class creator applied.
And here is the sibling that matches.
It has the class creator applied.
And this element is the sibling of the element which has the ID link1.
Builder allows you to search for sibling elements, plus, does the same thing.
This is the same selection as before.
Find a sibling of the element with ID link1,
and the sibling should have the creator class applied.
The same match is found as before.
You can perform CSS selections using the CSS class.
Make sure you specify the dot before you specify the value of the class.
Select all elements which have the class creator applied.
There are two elements that match with another HTML.
Here is another way to specify class selectors using Soup Sieve.
Within square brackets, class tilde equal to animated.
There's exactly one element that matches.
Observe that it has a class animated applied.
When you perform CSS selections using the ID of an element,
you need to prefix it using the hash, indicating that it's an ID.
This will find that tag which has id link3.
There's exactly one HTML element.
Here is a slight variation on CSS selection by ID.
Find all a tags which have the id link3.
We have an a tag with the id link3.
That's the only match.
Here is another variation,
find_all a tags which have some value for the HREF attribute.
And there are four a tags that match.
Find all image tags which have this specific value for source.
Sources equal to this Wikipedia link.
There's exactly one image tag that matches.
Exact matches are often not that useful.
Let's perform a few matches using regular expressions.
Select all image tags where the source attribute ends with .jpg.
Dollar sign stands for ends with.
Here are all of the image tags that have JPG images in the source attribute.
Let's use another regular expression here.
Find all image tags where the source attribute starts with HTTPS.
The caret stands for starts with.
This gives us all of the secure image links in our HTML.
Let's try another variation.
Find all image tags where the source contains somewhere within it .org.
The asterisk is a wild card search.
Soup Sieve makes your search even more powerful.
You can use CSS selections along with regular expressions and
search for basically anything within your HTML.