Why does css prefer a general rule over a class rule? [duplicate] - html

This question already has answers here:
Specificity of inherited CSS properties
(4 answers)
Closed 1 year ago.
let's say I have following html-code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="a">
<div class="b">
<p>Test</p>
</div>
</div>
</body>
</html>
And following css-fragment:
div {
color: red;
}
.a {
color:blue;
}
Why now is "Test" colored red and not blue? The tag-element is in the d-level, while the class element is in the c-level, thus the class-rule is higher and thus it should be applied, but it don't - why? Why doesn't the children of <div class="b"> inherit properties from <div class="a"> - or to put it more accurate: Why do I have to explicitly set color = inherit?
_

There is no class "b" in css-fragment. Then,
(div class="b") is similar to (div) with no class.

Because .a only affects on its own div and "div" its for all divs.
So if you do this:
<div class="a">
<div class="b" id="b">
<p>Test</p>
#b { color: blue; }
or
.b { color: blue; }
Your test will be blue.

Related

why marginTop not working in using nth-of-type? [duplicate]

This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed last year.
i have added margin top using nth-of-type why it is not applied ?but it working find when I am passing value 3 why ?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.rc105 .rc105-subheader:nth-of-type(2) {
margin-top: 32px;
}
</style>
</head>
<body>
<section class="rc105 rc105v0" >
<div class="cwidth">
<div class="rc105-subheader">
<div class="rc105-ttl">
Applications
</div>
<p class="desc"> together.
Learn more </p>
</div>
<div class="rc105w1 rw-scrim-neutral-40bg">
</div>
<div class="rc105-subheader">
<div class="rc105-ttl">
Test
</div>
<p class="desc"> platform.
Learn</p>
</div>
<div class="rc105w1 rw-scrim-neutral-40bg">
</div>
</div>
</section>
</body>
</html>
The nth-of-type is referring to the element type, in this case a div.
It is not referring to the nth instance of that class in the selector.
The 3 works because the class you are targeting is the 3rd div in that node. The 2 doesn't work because the second div does not have that class, it has some rw-scrim-neutral-40bg class.
It is typically more common to see nth-of-type used with the element in the selector, e.g. div:nth-of-type(#) or p.something:nth-of-type(#)

Can I use <body> as the main grid container in CSS Grid? [duplicate]

This question already has answers here:
CSS Grid nested in a wrapper-div or a body element?
(1 answer)
Set CSS Grid on <body> element?
(2 answers)
Closed 3 years ago.
Instead of wrapping everything in a <div>, can I just the set the display of <body> to grid?
<style>
.grid-container {
display: grid;
// Other grid stuff
}
</style>
…
<body>
<div class="grid-container">
<div class="header"></div>
<div class="other"></div>
</div>
</body>
vs.
<style>
body {
display: grid;
// Other grid stuff
}
</style>
…
<body>
<div class="header"></div>
<div class="other"></div>
</body>

Select body with an element with a specific id [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
On hover of child, change background color of parent container (CSS only)
(3 answers)
Closed 4 years ago.
so i have a html page with a body and the following structure
<body>
<h1>Hello</h1>
<div>
<div>
// editable area -->
<div id="b">
<h1>Bye</h1>
</div>
// <--
</div>
</div>
</body>
I want to style the <body> but can only access and edit the <div> with id "b" and add a custom css file. Since the css file is used for more than one html files i can't just directly style the <body>.
Is there a possibility to style a <body> with a specific child element (child of a child) with a specific id?
You could add a specific class or id to a html page of your site(set of html pages), this way, you will only be doing CSS changes for your specific html page then access other elements as in the snippet below:
#Body_id{
background-color: yellow;
}
#Body_id div{
background-color: pink;
}
#Body_id div div{
background-color: red;
}
#Body_id div div #unique{
background-color: green;
color:white;
}
#unique{
background-color: black !important;
}
<body id="Body_id">
<h1>Hello</h1>
<div>
<div>
<div id="unique">
<h1>H1 in level 3</h1>
This is a level 3 div
</div>
This is a level 2 div
</div>
This is a level 1 div
</div>
</body>
You can give the body a ID
Then you can style it like this:
#Body_id{
background-color: yellow;
}
#divFirst{
background-color: red;
}
#divSecond{
background-color: blue;
}
#b{
background-color: green;
}
<body id="Body_id">
<h1>Hello</h1>
<div id="divFirst">
<h1>DivFirst</h1>
<div id="divSecond">
<h1>DivSecond</h1>
<div id="b">
<h1>Bye</h1>
</div>
</div>
</div>
</body>

hover on link change background image [duplicate]

This question already has answers here:
CSS div height 100% not working
(3 answers)
Why doesn't height: 100% work to expand divs to the screen height?
(12 answers)
Closed 4 years ago.
I am trying to hover on a link to change the image in div using Adjacent Sibling Selector, but it does not show anything when I hover on the link.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styletest.css">
</head>
<body>
<div>
<a class="a" href="/template-1978944/editor"> ANATOMY NOW
</a>
<div class="bg"> </div>
</div>
</body>
</html>
CSS:
.bg{
height:100%;
}
.a:hover + .bg {
background-image: url('https://preview.ibb.co/gce5me/anatomy_Now.png');
}
You can also use height:100vh;if you need to fill the background of the viewport

Why float property does not work if width of elements is set?

Here is HTML Code
<!doctype html>
<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="Font Sizes.css">
</head>
<body>
<div class="First">
<img src="firstImage.png" alt="First Image of Article" class="FirstImage">
<p> Picture No.1</p>
</div>
<div class="Second">
<img src="secondImage.png" alt="Second Image of Article" class="SecondImage">
<p>Picture No.2</p>
</div>
</body>
Here is CSS
.First{
width:430px;
background-color: Red;
float: left;
}
.Second{
width:330px;
background-color: Blue;
}
I tried different tricks but failed. Please Explain it in detail. I searched a lot but could not found my answer.The second element not arrange it self to the right side of first element. When i remove the width property from second element then it arranged at right.
With Width property:
Without Width Property on second element:
div's are block level elements and you have only supplied a float on First. Putting a float on Second will give you the effect you desire IF the browser is wider than 760px;