Css spaces in selectors

but it will not be applied to the

I know this doesn’t answer your question but I’d like to offer a recommendation to try SASS. It looks like you’re going to have a ton of duplicated CSS, considering the class names.

@Roman There could also be ` .container_12 .grid_6.line ` Notice, no space between grid_6 and line; this implies the element should have both grid_6 and line as classes. And it should be a child of ‘container’, as @Sampson points out in the accepted answer 🙂

10 Answers 10

.container_12 .grid_6, .container_16 .grid_8

That says «make all .grid_6’s within .container_12’s and all .grid_8’s within .container_16’s 460 pixels wide.» So both of the following will render the same:

As for the commas, it’s applying one rule to multiple classes, like this.

It’s functionally equivalent to:

But cuts down on verbosity.

I understand that we can apply one rule to several classes separated by comas. It’s not clear to me why some classes in the example are not separated by commas.

When they are separated by a space, it’s a nesting issue. The latter are found within the former. So .container_12 .grid_6 is addressing only the .grid_6 items found within .container_12 items.

This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6 , and applies the CSS rules to the DOM element with class grid_6 .

Putting > between them says that the grid_6 node must be a direct child of the node with class container_12 .

A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6 .

Not exactly what was asked, but maybe this will help.

To apply a style to an element only if it has both classes your selector should use no space between the class names.

.class1.class2 < color: #f00; >.class1 .class2 < color: #0f0; >.class1, .class2

Bold Red Text
 
Bold Text (not red)
 
Bold Green Text

Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.

.container_12 .grid_6, .container_16 .grid_8

applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16 .

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 like
.class-a, .class-b , you will have the properties applied to the elements with anyone of the two classes.

You have four classes and two selectors in your example:

.container_12 .grid_6, .container_16 .grid_8

So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.

 
This has a width of 480px.
 
This has an unknown width.</p>
 

The above means that you are applying styles to two classes, indicated by the comma.

When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of container_16 classes.

This is not effected
 
 
This is effected.
 
 

The first grid_6 will not be effected while the second grid_6 class will because it is contained inside a container_12.

Would only apply the bold to

tags within areas that have class «description» that are inside of an area with id «admin», such as:

Источник

Why are spaces used to separate things in css

what does the space between blockquote and cite do? I understand if they are separated by a comma, then both blockquote and cite will have «font-style: normal;» now they are separated by space, does this mean if a blockquote tag is embedded into a cite tag it will get «font-style: normal;»? Thank you.

3 Answers 3

The space is known as the descendant combinator. blockquote cite selects any cite element within a blockquote element. Likewise for blockquote em and blockquote i .

In other words, it’s not «if a blockquote tag is embedded into a cite tag», it’s the other way around (besides, you can’t place blockquote s in cite s in the first place).

As you note, commas group selector sequences into the same rule.

This means target the cite tag inside the blockquote etc.

In this instance, the site is attempting to override all italics set inside a blockquote .

A space between selectors will cause the style sheet to apply the rule selectively. A space is the descendant selector or combinator. It applies to any descendant element within the descender.

A rule of blockquote cite < font-style: normal; >would only apply the font style to both item 1 and item b . Both item 1 and item b are descendants of item A . item A will not get the rule.

 A. item A (Blockquote) 1. item 1 (Cite) a. item a b. item b (Cite) 2. item 2 

This is slightly similar to the > selector. That is the child selector. It applies to any child of an element. A child is a 1st level descendant. In the table above with rule blockquote > cite < font-style: normal; >instead, item b would not get the font-style rule applied, as it is a 2nd level descendant, hence not a child. item A would also not get rule.

If you want both blockquote and any cite within blockquote to get the rule, they must both be listed:

blockquote, blockquote cite

Источник

Use a space or greater than sign > in CSS selector? [duplicate]

will do the very same. Is there any reason to use one over the other or are they just two different ways of doing the same thing?

though duplicate, question is more useful than the original one; because if I already knew that they were called child or descendent nodes, why to ask a question. Thanks to a naive question

6 Answers 6

No they are completely different, using > selects a child element whereas using a space will select a nested element at any level.

Using ␣ /space in the selector…

 
 
This will be selected
 
 
This will be selected as well
 
 

So here, the selector having space will target the div at any nested level of the parent element.

 
 
This won't be selected
 
 
This will be selected
 
 

Whereas here, the selector will target your div which is a child of the element having .welcome but it won’t select the div which is nested inside section tag as it is a grandchild (but not a child) of the outer div .

The ␣ combinator (that’s meant to represent a space, or more properly one or more whitespace characters) combines two selectors such that the combined selector matches only those elements matching the second selector for which there is an ancestor element matching the first selector. Descendant selectors are similar to child selectors, but they do not require that the relationship between matched elements be strictly parent-child.

The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of «hops» up the DOM.

Источник

What is the difference between ‘>’ and a space in CSS selectors?

Further to this question, as I wasn’t aware of this and could be used to solve a problem I’m having, which browsers support this type of selector?

It’s supported in all current browsers. IE got support in version 7: msdn.microsoft.com/en-us/library/…

5 Answers 5

A > B will only select B that are direct children to A (that is, there are no other elements inbetween).

A B will select any B that are inside A, even if there are other elements between them.

> is the child selector. It specifies only immediate child elements.

The white space ( ) is the descendant selector. It specifies any descendant (including grandchildren, grand-grandchildren etc.).

The child selector is not supported by IE 6 and lower. A great compatibility table is here.

> vs. Space

Consider the two scenarios div > span < >vs. div span

Here, the (space) selects all the all the elements inside element even if they are nested inside more than one element. The > selects all the children of element but if they are not inside another element.

Take a look at two examples:

> (Greater than):

This one just selects the Hello. (because it’s immediately after the nested div tag), and World! and it won’t look for the inside

tag because it’s not immediately after a div tag.

Space

This one selects all the span tags, even if they are nested inside other tags.

div.card div.name matches both.

That is, the > selector makes sure that the selected element on the right side of the > is an immidiate child of the element on its left side.

The syntax without the > matches any that is a descendant (not only a child) of .

A > B selects B if it’s a direct children of A, whereas A B selects B whether it is a direct children of B or not.

 
USING SPACE
 .a .b a 
 a b 
  a b c   
 
 
USING GREATER THAN SIGN
 .x > .y x 
 x y 
  x y z  

The demo is nice but really just ancillary to the information which answers the question; information that’s already in the other three answers. Maybe if this question were asked today, that’d be useful, but if you’re going to necro an >8-year-old question, it should really be for a compelling reason.

Источник