When to Use '>' Sign in CSS

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

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

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

When to use `` sign in CSS?

> Means the direct child of a selector, so

li > a will ONLY match an <a> which is directly inside an <li> for example.

If the html was <li><span><a> the <a> would not be matched.

Removing the > will match any <a> nested inside an <li>, irrespective of other things around it, so li a would match the <a> in

<li><a> but also in <li><span><a>, for example.

Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

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>

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.

CSS Selectors - difference between and when to use , + or

In CSS these are called Combinators and means three different things:

1. div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.

2. div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.

3. div + .class: is called Adjacent sibling selector and will match any element that immediately follows a div and have the class .class.

Example:

In the following example:

<div>
  <p class="test">
    <a href="#" class="test">
      Testing link</a>
    <img class="test"/>
  </p>
  <span class="test">A span</span>
</div>
<h4 class="test">A title</h4>

• div > .test will match only <p> and <span> elements.
• div .test will match <p>, <a>, <img> and <span> elements.
• div + .test will match only <h4> element because it follows the <div> immediately.

Demo:

div .test {  background: yellow;}
div>.test {  background: red;}
div+.test {  background: green;}

<div>  <p class="test">    Pragraph    <a href="#" class="test">      link</a>    <img class="test" width="50px" height="50px" />  </p>  <span class="test">Span</span></div><h4 class="test">Title</h4>

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

CSS3 Selectors: + vs ~ and the opposite of ~?

Is my understanding of the difference correct?

Yes. Selectors L3 defines those two types of sibling combinators (emphasis mine):

• Adjacent sibling combinator

  The adjacent sibling combinator is made of the "plus sign" (U+002B, +)
  character that separates two sequences of simple selectors. The
  elements represented by the two sequences share the same parent in the
  document tree and the element represented by the first sequence
  immediately precedes the element represented by the second one.

• General sibling combinator

  The general sibling combinator is made of the "tilde" (U+007E, ~)
  character that separates two sequences of simple selectors. The
  elements represented by the two sequences share the same parent in the
  document tree and the element represented by the first sequence
  precedes (not necessarily immediately) the element represented by the second one.

How can I select every element placed before (or immediately before) another element?

As explained in Is there a previous sibling selector?, it's not possible to do that with Selectors L3. Selectors L4 may introduce some way to do it, but probably it will only be available in JS (e.g. through querySelector) but not in CSS stylesheets because of performance reasons.

In SCSS, what does % symbol indicate?

In SCSS, the % indicates a placeholder selector.

[Placeholders] are very similar to class selectors, but instead of using a
period (.) at the start, the percent character (%) is used.
Placeholder selectors have the additional property that they will not
show up in the generated CSS, only the selectors that extend them will
be included in the output.

So if you included this in your SCSS somewhere but never used (extended) it, it will not appear in your generated CSS.

%box__dir {
 position:absolute;
 width:inherit;
 height:inherit;
 text-align:center;
 line-height:inherit;
 transition:transform .4s ease;
}

Once you use the placeholder, it will appear in your generated CSS as expected.

.something {
  color: red;
  @extend %box__dir;
}

Generated CSS:

.something {
  color: red;
  position:absolute;
  width:inherit;
  height:inherit;
  text-align:center;
  line-height:inherit;
  transition:transform .4s ease;
}

---

Related Topics