What Does ">" Mean in CSS

What does the (greater-than sign) CSS selector mean?

> is the child combinator, sometimes mistakenly called the direct descendant combinator.1

That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.

An illustration comparing the child combinator with the descendant combinator:

div > p.some_class { 
background: yellow;
}

div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>

CSS use of '' (greater than) and '*' (star)

Your understanding is correct for them individually. When combined, it means all elements under the specified element (.seq-canvas in your example).

Here is a test. Notice that * alone will change the font size for everything, while > * will only change the color of the children of .seq-canvas:

#sequence .seq-canvas > *  {color: blue;}
* { font-size: 10px; }
<p>I'm outside</p><div id="sequence"><ul class="seq-canvas">  <li>This must be blue</li>  <li>So is this</li>  <li>    <ul>      <li>But is this blue?</li>    </ul> <li>This must also be blue...</li> <li>How about <span>SPANS</span> - will they be blue as well?</li> <div>Or let's say that I put a div in here (even    though I know it's not right), does this then    mean that this is blue? </div></ul></div><p>I'm also outside</p>

CSS '' selector; what is it?

> selects immediate children

For example, if you have nested divs like such:

<div class='outer'>
<div class="middle">
<div class="inner">...</div>
</div>
<div class="middle">
<div class="inner">...</div>
</div>
</div>

and you declare a css rule in your stylesheet like such:

.outer > div {
...
}

your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See fiddle.

div {  border: 1px solid black;  padding: 10px;}.outer > div {  border: 1px solid orange;}
<div class='outer'>  div.outer - This is the parent.  <div class="middle">    div.middle - This is an immediate child of "outer". This will receive the orange border.    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>  </div>  <div class="middle">    div.middle - This is an immediate child of "outer". This will receive the orange border.    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>  </div></div>
<p>Without Words</p>
<div class='outer'> <div class="middle"> <div class="inner">...</div> </div> <div class="middle"> <div class="inner">...</div> </div></div>

In MUI, what does '& *' mean?

The sign & related to css compiler, like scss.
The * means all, as the sign > means direct child.

Basically, it will refer to the element you are in his scopes, this case:

// element card
card: {
maxWidth: '475px',

// all direct children of the element card
'& > *': {
flexGrow: 1,
flexBasis: '50%'
},
}

What is the difference between '' and a space in CSS selectors?

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.

How is the greater than or character used in CSS?

It's a CSS child selector. P > SPAN means applying the style that follows to all SPAN tags that are children of a P tag.

Note that "child" means "immediate descendant", not just any descendant. P SPAN is a descendant selector, applying the style that follows to all SPAN tags that are children of a P tag or recursively children of any other tag that is a child/descendant of a P tag. P > SPAN only applies to SPAN tags that are children of a P tag.

What does the + (plus sign) CSS selector mean?

See adjacent selectors on W3.org.

In this case, the selector means that the style applies only to paragraphs directly following another paragraph.

A plain p selector would apply the style to every paragraph in the page.


This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.

See also Microsoft's overview for CSS compatibility in Internet Explorer.

What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
<div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
<div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

What is ul means in SASS?

This the CSS syntax to select the child of an element. See this reference for more on how it works:

This selector matches all elements that are the immediate children of
a specified element. The combinator in a child selector is a
greater-than sign (>). It may be surrounded by whitespace characters,
but if it is, Internet Explorer 5 on Windows will incorrectly treat it
as a descendant selector. So the best practice is to eschew whitespace
around this combinator.



Related Topics



Leave a reply



Submit