- Learn CSS Cascade
- Learn different CSS selectors
- Tutsplus - The 30 CSS selectors you must memorize
- Understanding Style Precedence in CSS
- W3School - CSS Selector
CSS uses a mechanism called the cascade to resolve any such conflicts and arrive at a final set of styles to be applied to the document. Two key components of the cascade are inheritance and specificty.
Inheritance - The elements on your website make up a treelike hierarchy with the root element at the top and the rest of the document structure spreading down below it.
Specificity - Describes the weight of a selector and any declarations associated with it.
| Selector type | Example | Specificity |
|---|---|---|
| Universal Selector | * | 0,0,0,0 |
| Type Selector | div | 0,0,0,1 |
| Class Selector | .luigi | 0,0,1,0 |
| ID selector | #mario | 0,1,0,0 |
| Inline | style="color:#ccc;" | 1,0,0,0 |
Specificity values are cumulative. A selector containing two type selector and a class selector div.action p has a specificity of (0,0,1,2).
A selector containing 11 type selector (0,0,0,11) has a lower specificity than a class selector (0,0,1,0).
Last Rule - When selectors have the same weight the last rule is applied.
Calculate the specificity fo the following selector
| Selector | Specificity |
|---|---|
| *.hulk a | |
| header#thor div .links li | |
| #ant-man section article h1 | |
| .iron-man .stark aside p | |
| footer.spider-man p#title div link | |
| My Link |
Take a look to the following code and determine what color is the paragraph going to be.
<style>
article #text {
color: #aaa;
}
article div .expression {
color: #ccc;
}
div p#text {
color: #0f0;
}
</style>
<article>
<div>
<p id="text" class="expression">A general rule of thumb when declaring your css is to declare properties with the least specificity needed to style your elements.</p>
</div>
</article>Descendent selector - Matches an element that is a descendant of another specified element. This applies to all level of descendant. Selectors chain together separated by white space. The right most selector is what is actually getting target.
body h1 {
font-size: 1.75em;
}
section .warning p {
color: red;
font-weight: bold;
}Child selector - Matches an element that is a direct child of another. It will not include grandchild and down. It is more restrictive than descendant selector.
body > main {
font-size: 1.75em;
}
section > article > h2.title {
color: red;
font-weight: bold;
}Pseudo-class Selector - It is used to define a special state of an element. There are many Pseudo-classes available. Let's take a look to some of the most common used: first-child/last-child, hover, nth-child(n), and visited.
a.bowser:hover {
text-decoration: underline;
}
article h2:first-child {
text-style: italic;
}
section#kirby div:nth-child(2) {
font-size: 1.2em;
}<!-- Type selector-->
<p>This is a paragraph that contains <span>several span tags</span>. I'd like to style these span tags across my <span>entire site at once</span>, to establish a default site-wide format for them. The most efficient selector for this would be the <span>element selector</span>, as it will allow me to establish a base-line format for the span tag with a <span>low degree of specificity</span>. This means that the formatting will be controlled throughout the entire site with a single selector, and it will be <span>easy to overwrite in specific instances</span> where I want the styling to change.</p>
<!--Class selector-->
<h4>Targeting class attributes</h4>
<p>In this example I want to target specific class attribute values. Note how the styling is applied regardless of element type. <em class="highlight">Class selectors are also more specific than element selectors</em>, so they allow us to overwrite the more general styles of element selectors.</p>
<h4 class="highlight">Using class selectors</h4>
<p>They also allow us to target very specific locations or instances by simply applying a <strong class="highlight">class attribute</strong>. This is a great way to write styles for specific purposes with a single selector and then apply it whenever needed by adding the appropriate class attribute.</p>
<p>Care should be taken when using class selectors as overuse of them can bloat code and create stylesheets that are hard to maintain.</p>
<!--Id selector-->
<section id="overview">
<h4>Targeting ID attributes</h4>
<p>In this example I want to target specific ID attribute values. Note how the styling is applied regardless of element type. ID selectors are extremely specific, and will overwrite most selector types.</p>
</section>
<h4 id="strategy">Using ID selectors</h4>
<p>Many designers avoid using ID selectors and discourage their use in projects due to their highly specific nature. ID selector styling is very hard to overwrite later, and generic interface styling can fail if dropped into a region being controlled through ID selectors. Still, ID selectors can play an important role in styling sites. You simply need to develop clear rules for when they are appropriate to use and how they might impact future styles.</p>
<!--Descendent selector-->
<div>
<h3>Example:</h3>
<section>
<h4>Targeting nested elements</h4>
<p>Descendent selectors allow us to be much more precise in terms of where styling is applied. Using them allows us to style elements a certain way when found inside a specific element type and another way if found elsewhere. This allows us to create discreet areas of styling in an efficient manner. <em>It also makes it easy to create self-contained elements</em>, as class and ID attributes can be used to identify specific UI elements that are styled with a combination of descendent selectors.</p>
<aside>
<h4>Strategies for descendent selectors</h4>
<p>Because descendent selectors are tied directly to the structure of your HTML, it’s difficult to plan any effective strategy for using them without first understanding how your site’s content will be structured. The main focus of any strategy outlining the use of descendent selectors should be to strike a balance between specificity and modularity. You want your selectors to properly style the targeted area, but not to the detriment of adding styles later that may need to overwrite these base styles. </p>
<p>Also, care should be taken to write descendent selectors as efficiently as possible. <em>Any selector that requires over three selectors to construct can probably be rewritten in a more efficient manner</em>.</p>
</aside>
</section>
</div>
<!--Child selector - Also known as Child Combinator-->
<section id="example">
<h4>H4 inside section</h4>
<p>Paragraph inside section</p>
<p>Paragraph inside section <span>-span text-</span></p>
<article>
<h4>H4 inside nested article</h4>
<p>Paragraph inside nested article <span>-span text-</span></p>
</article>
</section>
<!-- Psudo-class selector -->
<section>
<p>This paragraph contains an <a href="#">anchor</a></p>
<ul>
<li> Element 1</li>
<li> Element 2</li>
<li> Element 3</li>
</ul>
</section>Arrange the following in order from most specific to least specific.
- .my_div
- div
- #my_navigation
- div > div
How can you improve this snippet?
<style>
h1 {
color: #ccc;
}
p {
color: #ccc;
}
</style>
<aside>
<h1>Introducing Brotli: a new compression algorithm for the internet</h1>
<div>
<p>At Google, we think that internet users’ time is valuable, and that they shouldn’t have to wait long for a web page to load. Because fast is better than slow, two years ago we published the Zopfli compression algorithm. This received such positive feedback in the industry that it has been integrated into many compression solutions, ranging from PNG optimizers to preprocessing web content. Based on its use and other modern compression needs, such as web font compression, today we are excited to announce that we have developed and open sourced a new algorithm, the Brotli compression algorithm.</p>
<p>While Zopfli is Deflate-compatible, Brotli is a whole new data format. This new format allows us to get 20–26% higher compression ratios over Zopfli. In our study ‘Comparison of Brotli, Deflate, Zopfli, LZMA, LZHAM and Bzip2 Compression Algorithms’ we show that Brotli is roughly as fast as zlib’s Deflate implementation. At the same time, it compresses slightly more densely than LZMA and bzip2 on the Canterbury corpus. The higher data density is achieved by a 2nd order context modeling, re-use of entropy codes, larger memory window of past data and joint distribution codes. Just like Zopfli, the new algorithm is named after Swiss bakery products. Brötli means ‘small bread’ in Swiss German.</p>
</div>
</aside>Oh no, someone messed with my code! Please help me out to get it back the way it was before. Gladly they didn't make any changes to my HTML, but my CSS is broken. Please, help me. Download the Zip file
This is how it should look once you have it all fixed.
