-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathIf declarations from the same origin and.twig
55 lines (33 loc) · 1.23 KB
/
If declarations from the same origin and.twig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- If declarations from the same origin and cascade layer conflict and one property value has the !important flag set, the important declaration is applied no matter the specificity. When conflicting declarations from the same origin and cascade layer with the !important flag are applied to the same element, the declaration with a greater specificity is applied.-->
<!DOCTYPE html>
<html>
<title>Problem Statement</title>
<head>
<style>
p {
color: red !important;
font-size: 28px;
}
div>p { /* 002 ( wins and that's why p gets green color)*/
color: green;
}
/*why this gives green color */
p {
color: red !important;
font-size: 28px;
}
div>p {
color: green;
}
/* Answer: irrespective of specificity of element selector red color has been applied on p element and has !important on color property and then because of inheritance applied on next div>p then it will override the property color: green and that's why it gets red color*/
/*why this gives red color*/
</style>
</head>
<body>
<div>
<p>
Text
</p>
</div>
</body>
</html>