Css '≫' Selector; What Is It

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>

What does the * * CSS selector do?

Just like any other time you put two selectors one after another (for example li a), you get the descendant combinator. So * * is any element that is a descendant of any other element — in other words, any element that isn't the root element of the whole document.

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

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

div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.
div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.
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>

Difference between universal and descending selector in CSS

The general rule is to use the universal selector very sparsely due to its bad impact on performance. You basically almost never use it.

The descendant selector, as the name suggests, targets descendants of the element preceding the descendant selector.

Please note that both selectors you show are not exactly the same.

It helps alot to read selector from right to left:

div * .test targets

items that have a css class test (.test)
which are descendants
of any element *
which is a descendant
of a div element.

See this example:

div * .test{
   color: red;
}

<div>
  <div class="test">test</div>
</div>

Exclude a class from all of the selectors in CSS

It is possible with CSS4 :is selector. You can watch out for the browser support here: https://caniuse.com/?search=is but in modern web developer terms, you are safe to use it.

:is(h1,h2,h3):not(.exclude) {
  background: #bada55;
  color: #565656;
  padding: 10px;
}

<h1 class="exclude">
  Excluded
</h1>
<h2 class="include">
  Included
</h2>
<h3 class="exclude">
  Excluded
</h3>

In Angular, why is the selector in component decorator called the css selector?

A selector in CSS defines a rule on how to match against the DOM, determining where / when a given style rule applies. In Angular, directive / component selectors use these very selectors, too, to define what elements they apply to. Element selectors (like "app-my-component") for components are what you'll see most of the time, but you're not limited to those.

For example, you could write a component with a selector of "a[href]" which matches any a element that also has an href attribute. In fact, you could even use a selector of "[href]", matching on any element with such an attribute. You could even use a selector like ":not([href])" to apply your directive on any element which does not have such an attribute.

In practice this can be quite useful, especially for directives. In fact, if you look at the source code of Angular's RouterLink directive, you'll find that it is actually implemented as two separate directives, one with a selector of a[routerLink] and one with a selector of :not(a)[routerLink].

Is there a short form for this css selector

(Currently) there is no any heading selector but an alternative with certain restrictions is this:

.wrapperClass .someClass > *

It will match any element that is a direct child of .someClass.

Css '≫' Selector; What Is It