Class name with space css

Altering classes using CSS with spaces in the class name

Solution 2: To find all elements having class attribute ending in whitespace: Solution 3: If you specifically target the class attribute you can include spaces. Class names do not include spaces.

Altering classes using CSS with spaces in the class name

The spaces you see mean the div element has multiple classes rather than a space in the class name.

You could target this element in your CSS with either .navbar-collapse or .collapse .

If you wanted to only affect elements with both classes you would use .navbar-collapse.collapse .

.navbar-collapse < // CSS for elements with a class of 'navbar-collapse'. >.collapse < // CSS for elements with a class of 'collapse'. >.navbar-collapse.collapse < // CSS for elements with a class of both 'navbar-collapse' and 'collapse'. >

1) There are no spaces in classes. Possible naming conventions are: foo-bar(hyphen), fooBar(camelCased), foo_bar (snake case), or just foobar.

The space the way you wrote it would say that collapse is a child node, so select the div collapse that is the child of navbar-collapse, which markup would resemble:

Pro’s use different naming conventions to denote different THINGS. Everyteam is different, but usually around this:

1. I like to use hyphens for my css classes: foo-bar
2. Snake_case for ids: #foo_bar
3. I never camel case css, but somepeople do it to signify this class is written from Javascript.
4. If one of my devs wrote a two word css class key, he’d be made fun of.

What do commas and spaces in multiple classes mean, The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12. The space means heritage, and the comma means ‘and’. If you put properties with a selector …

Is it possible to use the space character in CSS class names?

When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

Of course it’s possible to escape a space character, e.g. — HTML attribute values can contain character references per https://html.spec.whatwg.org/multipage/syntax.html#syntax-attribute-value:

Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.

However, it doesn’t matter whether the space is HTML-escaped or not for the above statement to apply. A HTML-encoded space character still decodes to a space character, and so e.g. class=»a b» still results in “a set of space-separated tokens”. See e.g. https://html.spec.whatwg.org/multipage/parsing.html#attribute-value-(double-quoted)-state for how double-quoted attribute values are parsed.

It recognizes the space as new class name so use . instead of space in css.

There is no way to escape the space character in the class attribute value and hence will always be interpreted as two different classes.

Css — What are the advantages of assigning multiple, you may have several divs which you want to act as navbars, but you may not want all of them to be fixed to the top. Perhaps you want some fixed to the bottom. Having multiple classes helps you to reuse css instead of duplicating it. – Brino. May 7, 2015 at 3:52.

Handling class name with spaces in it html

If I understand your question, you’re looking to put the value «ABC sub» in the query string. So you’ll have «Accordion=ABC sub».

You’ll want to URL encode, so spaces will equal «%20» according to:URL Encoding

Class — Using two CSS classes on one element, You just need a space between one or more class names. Share. Improve this answer. Follow edited Nov 6, 2017 at 18:03 Instead of using multiple CSS classes, to address your underlying problem you can use the :focus pseudo-selector: input[type=»text»] < border: 1px solid grey; width: 40%; height: …

How to use CSS selector with space in class name

Your implied premise, that a class cannot be found because it contains a space, is incorrect. Class names do not include spaces. Proof:

html = One Two  End doc = Nokogiri::HTML(html) puts doc.search('.Example') 

So I think your HTML document simply doesn’t have a class containing Example in it. If you provided the sample HTML, this question would have been easier to answer.

To find all elements having class attribute ending in whitespace:

If you specifically target the class attribute you can include spaces. In my case the class value had a space:

Here is how I targeted that element using Nokogiri:

page.at_css("[class='Event_CategoryTree category']") 

Class names concatenated or separated by a space, You separate classes by a space when you want to refer to descendant element and you concatenate them when you want to refer to a single element with multiple classes. For example, to refer to a div with two classes, e.g.

Источник

How to reference a long class name with spaces in CSS?

I’m trying to style some Drupal output. In particular, I’m trying to reference a class with a super long name (that includes spaces). I’m unclear the syntax for this. Forgive me, I’m a CSS newbie. See:

 
National Nutrition Month: March 2012: “Get Your Plate in Shape”
 

.node SOMETHING-HERE .header h2

I cannot just reference the node, since it is used elsewhere for other purposes. I want to be specific and select only this class:

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

5 Answers 5

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

@LB— commas mean or dot means and so .node.node-article means a element needs to have both classes. Where as .node, .node-article means if it has atleast one of them.

Maybe I’m not giving you the answer you need, but class names cannot contain spaces.

An element can have multiple classes, which allows you the combine multiple styling rules for different classes to apply to a single element.

If you have spaces in a class attribute, it creates an element with multiple classes, delimited by spaces.

For example, if you have an element like this

and you had CSS like this

All three styles would be applied to the single div to make it big, red, and outlined.

In your case, it looks like you are trying to access a specific element, which is what the purpose of the id attribute is. Notice that the node has a unique id:

You can access an element with a specific id in CSS by using the # selector, like this

In your case, you probably want to do something like this:

How do I reference the H2 property, then? Is there a way to specify that it falls under an article property with x, Y, and Z classes?

@Doug You should use the id attribute if you want to reference a specific element, or add another class if you want a stlye that can apply to a new group of elements.

It is an override by class name. But you say «class names cannot contain spaces». InDesign5+ do this, and a lot of web-designers. There are a W3C rule that say «it is not valid»?

@PeterKrauss According to the W3C HTML specification, «Multiple class names must be separated by white space characters.». If class names could contain spaces, there would not be a way to disambiguate between a single class and multiple classes. Hence, a single class name cannot contain spaces.

Those spaces are effectively multiple classes on the one element, so your tag has the «node» class, and the «node-article» class, and so on and so on.

Then the article would have a black background, and white text. Both would be applied.

Also remember you can reference tags, and ids, so to get to your H2 you could do:

And you don’t necessarily need the «header» in there either, depending on what you want to achieve.

If you want to select all s that are descendants of tags with the «node-article» class, then you can do this:

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" 

Above line contains total 9 classes because of spaces between them. so, node is a single class, node-article is another class and so on. If you want to reference a class then you should write it like

If you want to reference multiple classes at once and want to apply same styles then you can write like

.node, node-article, node-teaser

In that case three individual classes node node-article node-teaser will have the same style with background color red. Now if you have multiple elements with same class i.e. article then all article with same class will have same style. To apply a style to a unique element you can id instead of class like and you can apply style with CSS to this element like

to select/reference the h2 inside header with parent element article that has you can write

Источник

edit css style of an element with a space in its class name

I’m creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements. This its structure:

The problem is that the class name has a space in it.

How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.

That would ordinarily be interpreted as two classes, which you can select with .post.quote (or .quote.post), though some versions of IE have issues with it.

3 Answers 3

The problem is that the class name has a space in it.

This is not possible in CSS. What you are doing is giving the element two classes.

You can address them such:

but in your case, it’s probably better to use a valid separator like

It is an override by class name. But you say «This is not possible in CSS»?? InDesign5+ do this, and a lot of web-designers. There are a W3C rule that say «it is not valid»?

@Peter class names with spaces are impossible — how would you refer to them? Consider .class name < font-size: 10px >— class refers to a class, and name to a sub-element. It’s not possible, try it out.

Yes, class=»a b» is not a unique class name, like class=»a_b» . My question is about the expected override effect in the HTML renderizarion ( b overrides a in this example). There are a W3C valid standard? Or it is an Adobe Indesign (export HTML) invention?

Example: at css definition we have «.a < font-weight: bold;>.b < font-weight: normal;>«, and at HTML body we have

not bold text

. So, IF browser renders with normal text, we can say that class b overrides a . Well, my browser not do this always. OK, I am submitting a new question, see stackoverflow.com/q/13808846/287948

This element actually has two classes — it is marked with both the post class and the quote class. So, you can use the following selectors to access it:

// css .post < . >// elements with the post class .quote < . >// elements with the quote class // jQuery var postLis = $('.post'); var quoteLis = $('.quote'); 

You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:

// css .post.quote < . >// elements with both the post and quote classes // jQuery var postAndQuoteLis = $('.post.quote'); 

Источник