How to Select Classes with Spaces

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
tokens

A 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
attribute

The 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