How to select classes with spaces
As Zepplock says, that's actually two classes in a single attribute: boolean
and optional
. The space is not part of a class name; it acts as the separator.
These three selectors will all match it:
.boolean
.optional
.boolean.optional
The last selector only picks up this element as it has both classes.
You never include a space when chaining class selectors, not even like this:
.boolean .optional
As that selects .optional
elements that are contained within separate .boolean
elements.
How to reference a long class name with spaces in CSS?
Using dots (.) you can combine multiple class as a group
.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix {
...
}
handling css id and classes with spaces
class="paragraph one"
actually represents two different classes
id="para one"
won't work, but you'll probably end up having an actual id of para
jQuery: selector (classname with space)
Class names can't have spaces in them. What you have there is two classes:
<div class="panel current">
This div has two classes: panel and current. That's easily selected:
$("div.panel.current")...
That means select all divs that have class panel and class current.
CSS: select a class whose name has a space?
Technically it is two separate classes, x and axis, but that doesn't mean you can't select and affect only what you want on the x-axis. Cascading selectors looks like this:
.x.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
How to select elements when there is a space in an HTML class
If there are spaces in the class attribute value, that means there are multiple classes applied to the element. To locate an element with multiple classes, the css
selector is just a chain of the classes. Generally, the form looks like:
element.class1.class2
Therefore, assuming the link is the first in the table with class "some" and "name", you can do:
require 'nokogiri'
html = %Q{
<table class="some name">
<thead>
</thead>
<tbody>
<tr>
<td style="text-align:center;">50</td>
<td style="text-align:left;"><a href="/thing" title="thing">This is the text I need</a></td>
</tr>
</tbody>
</table>
}
doc = Nokogiri::XML(html)
# Assuming you need both classes to uniquely identify the table
p doc.at_css('table.some.name a').text
#=> "This is the text I need"
# Note that you do not need to use both classes if one of them is unique
p doc.at_css('table.name a').text
#=> "This is the text I need"
BeautifulSoup and class with spaces
you can use a css selector to match many classes :
from bs4 import BeautifulSoup as soup
html = '''
<tr class="admin-bookings-table-row bookings-history-row paid "></tr>
<tr class="admin-bookings-table-row nope paid "></tr>
'''
soup = soup(html, 'lxml')
res = soup.select('tr.admin-bookings-table-row.bookings-history-row.paid')
print(res)
>>> [<tr class="admin-bookings-table-row bookings-history-row paid "></tr>]
Otherwise, maybe this answer can help you too :
https://stackoverflow.com/a/46719501/6655211
Targeting a class value that begins with a space
Any leading or trailing spaces in the value of a class attribute are meaningless for targeting purposes. This: class=" example"
is equivalent to this: class="example"
.
There is no need for a special selector that factors in the space.
From the HTML 5 spec:
2.4.7 Space-separated
tokensA string containing a set of space-separated tokens may have leading
or trailing space characters.
Space characters are necessary, however, for separating multiple values in a class attribute.
3.2.5.7 The
class
attributeThe attribute, if specified, must have a value that is a set of
space-separated tokens representing the various classes that the
element belongs to.
White space and selectors
For this cases I prefer using css selectors because of its minimalistic syntax:response.css("p.text-nowrap.hidden-xs::text")
Also google chrome developer tools displays css selectors when you observing html code
This makes scraper development much easier
Related Topics
Progress Bar with HTML and CSS
<H1>, <H2>, <H3>... Tags, Inline Within Paragraphs (<P>)
How Might I Force a Floating Div to Match The Height of Another Floating Div
Media Queries Not Working Inside an Iframe
Embed Youtube Code Is Not Working in HTML
How to Resolve 500 Internal Server Error
Selecting Siblings Between Two Nodes Using Xpath
Youtube Iframe Embed - Full Screen
Bootstrap 3 Grid, Does It *Really* Matter How Many Columns Are in a Row
How to Replace Radio Buttons with Images
Display Text on Mouseover for Image in HTML
Border Around Specific Rows in a Table
Chrome/Safari Display Border Around Image
Why Is Chrome Showing a "Please Fill Out This Field" Tooltip on Empty Fields
How to Make a Flex Item Not Fill The Height of The Flex Container