Menu
For example:
div > p.some_class { /* Some declarations */ } What exactly does the > sign mean?
310
$ initiates a variable in SASS which is a language extension that compiles to CSS (Similar to how CoffeeScript compiles to JavaScript) since CSS does not feature variables on its own.
A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector. e.g.
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
> 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>Which elements are matched by which selectors?
Matched by both div > p.some_class and div p.some_class
This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.
Matched by only div p.some_class
This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild. Therefore, only the rule with the descendant combinator in its selector is applied.
1Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".
164
> (greater-than sign) is a CSS Combinator.
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
Note: < is not valid in CSS selectors.
For example:
<!DOCTYPE html> <html> <head> <style> div > p { background-color: yellow; } </style> </head> <body> <div> <p>Paragraph 1 in the div.</p> <p>Paragraph 2 in the div.</p> <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant --> </div> <p>Paragraph 4. Not in a div.</p> <p>Paragraph 5. Not in a div.</p> </body> </html> Output:
More information about CSS Combinators
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
