CSS Selector Specificity

preview_player
Показать описание
  1. Dave Fisher
  2. CSS
Рекомендации по теме
Learn CSS Specificity 0:11:26

Learn CSS Specificity In 11 Minutes

CSS Tutorials (5) 0:04:08

CSS Tutorials (5) - CSS specificity tutorial for beginners - How to calculate it

What Is CSS 0:01:16

What Is CSS Specificity?

What is CSS 0:04:47

What is CSS Specificity and how styles are prioritized

CSS Specificity | 0:06:02

CSS Specificity | CSS Sunday Ep.3

CSS Specificity explained 0:13:27

CSS Specificity explained

CSS Cascade Layers 0:08:11

CSS Cascade Layers Tutorial #1 - Selector Specificity 101

HTML & CSS 0:11:08

HTML & CSS for Beginners Part 16: CSS selectors and Specificity

Understanding CSS Specificity 0:03:43

Understanding CSS Specificity

CSS Specificity 0:11:49

CSS Specificity

CSS Specificity: What 0:12:01

CSS Specificity: What You Need To Know

32. CSS Selectors 0:08:02

32. CSS Selectors Specificity | CSS Basics | Code with Mosh

Learn Every CSS 0:19:38

Learn Every CSS Selector In 20 Minutes

CSS Tutorial For 0:10:18

CSS Tutorial For Beginners 12 - Selector Specificity

CSS Specificity Rules 0:03:46

CSS Specificity Rules Practice

CSS selector specificity 0:00:50

CSS selector specificity in VS Code

CSS Selector Specificity 0:13:15

CSS Selector Specificity

How To Easily 0:00:48

How To Easily Calculate CSS Specificity #css #specificity

How To Calculate 0:09:29

How To Calculate CSS Specificity | CSS Specificity | CSS Tutorials | Frontend Tutorials |

CSS Specificity Explained 0:10:36

CSS Specificity Explained | Selectors rules for classes, ids and elements

CSS Specificity Explained 0:10:39

CSS Specificity Explained | CSS Specificity Rules With Examples | CSS for Beginners | SimpliCode

CSS Specificity Q&A: 0:00:46

CSS Specificity Q&A: Can lots of classes override an ID selector in CSS?

Learn Basic CSS 0:15:53

Learn Basic CSS Selectors in 15 Mins | Specificity Rules

Understanding Cascading , 0:25:33

Understanding Cascading , Specificity and Inheritance | CSS Lecture 4

Комментарии
Автор

Hi! could you look at this code and help me understand, because from what I gathered it goes against the rules you said on your video:

<html>
<style>
#first div {color: blue;} /*R1*/
p + p + div :first-child {color: red;} /*R2*/
</style>
<div class="post" id="first">
<div class="header">
<h1>Title</h1>
</div>
<p>First paragraph</p>
<p>Second paragraph</p>
<div class="footer">
<p>This is a footer</p>
</div>
</div>
</html>

R1 has a specify of 101; and R2 of 13. This creates a conflict with the color in line 13. Since R1 has the biggest specify for the same thing i figured the color would be blue, but when I tested on a browser it was red. How did that happen? Is it because R1 is inherited and R2 is not?

onlyonetwin
Автор

Thanks sir for your awesome presentation

tayebhimel
Автор

Thanks for bringing out the confusion related selector priority

userinterface