# CSS Rules and Selectors Now let's get to CSS, and we'll start, perhaps, with decoding the abbreviation. CSS stands for Cascading Style Sheets, but: *-- Why is it called "cascading"?* -- this is a question I often ask candidates during interviews. The answer is an analogy, and it's a pretty good one: imagine a cascade of waterfalls, and you're standing on one of the steps holding an inkwell, pouring its contents into the water -- all the water below will be colored by the ink. Same with CSS: if you set a style at a certain level, it flows down the "cascade" to the web page elements, coloring them with the "ink" of your style. *-- Why do I need all this?* -- when working with jQuery, you need to be able to read CSS rules fluently and compose CSS selectors to find the elements you need on the page. Practically every task you'll solve with jQuery starts with finding the right element on the page, so **knowing CSS selectors is mandatory**. But let's take it step by step. Here's a simple example of quite semantic HTML: {% code fullWidth="false" %} ```html Page Title

Page Title

Page Description

Section Title

Article Title

Lorem ipsum dolor sit amet, consectetuer adipiscing...

Article Title

Morbi malesuada, ante at feugiat tincidunt...

``` {% endcode %} This is an example of simple and proper HTML with a bit of CSS sprinkled in. Let's break down the selectors in the CSS code above (I intentionally kept the CSS inline rather than in a separate file, because it's more visual this way): * `body` -- these rules will be applied to the `` tag and all its descendants; remember: font settings cascade down through the element hierarchy * `h1,h2,h3` -- we're selecting `

`, `

` and `

` tags and setting the font color for these tags and their descendants * `#content` -- we're selecting the element with `id="content"`; padding settings don't cascade to descendants, they only change for this specific element * `.box` -- we're selecting elements with `class="box"` and modifying the border appearance of elements with that class Now in more detail, with more advanced examples:
selector
h1finding elements by tag name
#containerfinding an element by identifier id=container (identifiers are unique, meaning there should be only one on the page)
div#containerfinding a <div> with identifier container, but the previous selector is faster, while this one has higher specificity
.newsselecting elements by class name class="news"
div.newsall <div> elements with class news
#wrap .postfinding all elements with class="post" inside the element with id="wrap"
.cls1.cls2selecting elements with two classes class="cls1 cls2"
h1, h2, .postslisting selectors -- we'll select everything listed
.post > h2selecting <h2> elements that are direct children of the element with class "post"
a + spanall <span> elements immediately following an <a> element will be selected
a[href^=https]all <a> elements whose href attribute starts with https will be selected (presumably, all external links)
> This is by no means the full list; a description of all CSS selectors can be found on the corresponding W3C page: Going back to our waterfall analogy, imagine that on the next step someone pours ink of a different color. In real life, we'd get a mix of colors. But in CSS, this change will "repaint the water" on all subsequent steps, because in CSS what matters is order -- order and priorities. Let's get to the point: 1. the first step of our cascade has the lowest priority -- these are the browser's default styles > no matter what browser vendors claim, these styles can differ across browsers, which is why there's still such a thing as [CSS Reset](https://www.google.com/search?q=CSS+Reset) -- a great equalizer 2. on the second step are styles set by the user deep in the browser settings; rarely seen in practice 3. the most important for us -- the page author's styles, but even here everything follows an order * the lowest priority goes to styles linked as a file `` or embedded inside HTML with the `

This paragraph will be red

``` > and naturally, when priorities are equal, the last one declared wins * then come the ones that bad people hardcoded (not you, you won't do this) in `style=""`: ```html

This paragraph will be blue

``` * and then the `!important` flag shows up and breaks everything, because a rule with this flag becomes more important than even inline styles, turning everything upside down: ```html

This paragraph will still be red!

``` * to override such a style, the only option left is to write inline styles with the `!important` flag: ```html

This paragraph will be blue!

``` 4. the `!important` adventure isn't over yet -- if there are user styles with this flag, now it's their turn 5. and even browsers use `!important`, and such styles have practically the highest priority {% hint style="info" %} There are also priority rules for [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) and [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions), but that's a whole different story {% endhint %} If your head isn't hurting yet, I'll also mention that when calculating whose rules take precedence, the [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) of selectors is analyzed, and here's how the math works: * the calculation uses three weight positions -- `[0:0:0]` * for each element identifier (`#id`) -- `[1:0:0]` * for each class (`.class`) or pseudo-class (`:pseudo`) -- `[0:1:0]` * for each tag (``, `
`, etc.) -- `[0:0:1]` * where `[1:0:0]` > `[0:x:y]` > `[0:0:x]` * when the score is tied -- again, the last one declared wins Here are selectors arranged by ascending priority (the corresponding HTML code will follow):
selectorpriority
a tag has the lowest priority[0:0:1]
p { color: orange }
adding class intro to the tag[0:1:1]
p.intro { color: green }
adding another tag[0:1:2]
article p.intro { color: blue }
... we need more classes[0:2:2]
article.news p.intro { color: red }
the identifier id="pinned" on its own outweighs all tags and classes combined[1:0:0]
#pinned { color: darkblue }
adding the <p> tag, and specificity increases[1:0:1]
p#pinned { color: darkcyan }
adding another identifier id="top"[2:0:1]
#top p#pinned { color: darkgreen }
using style overrides any rules from external files and stylesheets¯_(ツ)_/¯
<p style="color:#333">...</p>
HTML page example ```html CSS Priority

Section Title

Article Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper imperdiet felis, sit amet imperdiet arcu varius et. Donec condimentum pulvinar sollicitudin.

Article Title

Sed rutrum accumsan ultricies. Nunc iaculis enim vel augue porta pellentesque. Nunc efficitur ex non ullamcorper ultricies. Nunc tempus vulputate enim, non egestas orci sodales eget.

```
There are also specificity calculation rules related to certain pseudo-selectors like `:not()` and `:where()`. The pseudo-selector itself doesn't add weight to specificity, but the rule inside the parentheses does: ```css /* [0:1:0] */ .red { color: red; } /* [0:1:1] */ .red:not(div) { color: red; } ``` Yeah, calculating specificity can genuinely become a non-trivial task, so here are a couple of calculators for you to choose from: * * {% hint style="warning" %} Remember that when applying CSS rules, the key factor is the specificity level of the selector. Only when specificities are equal does the order of style inclusion matter: ```html

This paragraph will be blue

``` {% endhint %} {% hint style="danger" %} And let me repeat: the `!important` flag is a scary thing. Use it only as a last resort. Such a rule has the highest priority, even though it has nothing to do with specificity. {% endhint %} *** #### Homework Here's a piece of CSS for practice -- write the corresponding HTML for it (this is an interview question ;): ```css #my p.announce, .tt.pm li li a:hover + span { color: #f00; } ``` And one more: ```css #my > li, dd.dd.tt ~ span { text-decoration: underline; } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://antonshevchuk.gitbook.io/jquery-for-beginners/0_html_css_javascript/css-selectors-and-rules.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.