What Does the "≫" (Greater-Than Sign) CSS Selector Mean

#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>

Why are we using greater than symbol in CSS when we apply properties of flex and grid?

> symbol isn't related to flex but it's part of CSS selector syntax. It is used to select immediate children. Here's an example:

<div class='first'>
    <div class="second">
        <div class="third">...</div>
    </div>
    <div class="second">
        <div class="third">...</div>
    </div>
    ...
</div>

Now

.first > div {
}

will only apply to the divs with second class, since third isn't immediate children of first.

What is a triple greater than selector in css?

>>> operator is Vue.js specific feature and called deep selector. In scoped CSS, you cannot apply CSS to child components without deep selector.

As your example, these two selector won't be applied.

<style scoped>
.table-wrapper {
  overflow-x: auto !important;  /* won't work */
}
.b-table .table-wrapper {
  overflow-x: auto !important;   /* won't work */
}
</style>

It needs deep selector.

<style scoped>
.b-table >>> .table-wrapper {
  overflow-x: auto; 
}
</style>

Use a space or greater than sign in CSS selector?

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

For example…

Using ␣/space in the selector…

<div class="welcome">
    <section>
        <div>This will be selected</div>
    </section>
    <div>This will be selected as well</div>
</div>

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

Demo (Using ␣/space)

.welcome div {
    font-size: 20px;
    color: #f00;
}

---

Using >

<div class="welcome">
    <section>
        <div>This won't be selected</div>
    </section>
    <div>This will be selected</div>
</div>

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.

Demo 2 (Using >)

.welcome > div {
    font-size: 20px;
    color: #f00;
}

---

From MDN : (For ␣)

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.

From MDN : (For >)

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 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.

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%'
        },
}

HTML & CSS: Greater than selector styles not applied

Assuming that the HTML example you provided is the full piece of code that you're trying to apply these styles to, I don't see how there could be any conflicts occurring to warrant using the direct descendant selector (>).

Just use the child selector for the whole thing.

/* Navigation */  
#navigation {
    min-height:45px;
}

#navigation ul {
    list-style-type: none;
    margin: 0px 45px 0px 0px;
    font-weight: bold;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #F3F3F3;
}

#navigation ul li {
    margin: 0px;
    float: left;
    position: relative;
    line-height: 26px;
    display: block;
}

#navigation ul li a {
    border-right: 1px solid #F3F3F3;
    color: #333;
    display: block;
    font-family: 'Trebuchet MS';
    font-size: 15px;
    padding: 10px 18px 13px;
    position: relative;
    text-decoration: none;
    z-index: 1000;
}

#navigation ul li.current_page_item a, 
#navigation ul li.current_page_parent a, 
#navigation ul li.current_page_ancestor a {
    border-top: 3px solid #72AC4B;
    color: #72AC4B;
    font-family: 'Trebuchet MS';
    margin-top: -3px;
}

---

Related Topics