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>
Related
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.
This question already has answers here:
How to make nth-child work with nested tags?
(2 answers)
Closed 2 years ago.
I tried hr:last-child but it didn't work. Here's my HTML structure:
<div>
<hr />
</div>
<div>
<hr />
// hide this
</div>
It worked only if I have hr as siblings.
whilst you can target it by targetting the parent divs and using the direct-sibling combinator and then the hr inside it would be far better to either add classes or better yet - change the html. Also I would suggest csss for adding things like border-bottom, rather than hr html elements.
but here goes - target the divs that are siblings - then in the div that is not the first sibling - target the hr and hide it with display:none. still not the way i would do it though.
I have added text and padding in the divs to demonstre the hr is removed in the second option.
EDIT - actually - just thought of a simpler way .... but only if you want to hide them in ALL divs that are not the first one.
.hide-hr div:not(:first-child) hr{display:none};
div {
padding: 5px
}
p {
margin: 0;
}
div + div {
border-top-width:0;
}
.hide-hr {
margin-top: 15px;
}
.hide-hr div + div hr {
display: none;
}
<p> the following shows the hr in the second div</p>
<div class="show-hr">
<div>
<p>div 1</p>
<hr/>
</div>
<div>
<p>div 2</p>
<hr/>
</div>
</div>
<p> the following hides the hr in the second div</p>
<div class="hide-hr">
<div>
<p>div 1</p>
<hr/>
</div>
<div>
<p>div 2</p>
<hr/>
</div>
</div>
You can just select the last div insted, and hide the hr in that
div {
border :solid 1px red;
padding: 10px
}
hr {
background: blue;
}
div + div {
border-top-width:0;
}
section div:last-child hr {
display: none;
}
<section>
<div>
<hr/>
</div>
<div>
<hr/>
</div>
</section>
Use :last--of-type
last-of-type
hr:last-of-type {
css here
}
This question already has answers here:
How to apply CSS to only immediate children of a certain class
(3 answers)
Closed 3 years ago.
<div class = "node-master">
<div class = "node-1">
<div class ="node-content">
child content 1
</div>
</div>
<div class = "node-2">
<div class ="node-content">
child content 2
</div>
</div>
In example above, I need to target "child content 1" CSS class to apply a different font color. However, the caveat is I cannot target node-1 directly because of how the HTML is being generated (dynalist.io app).
The setting dictating "child content 1" CSS syntax is from node-master.
Basically, what I need to do is have a CSS class that uses node-master and applies its properties to the first child <div>
You can play with :first-child CSS selector, for example if you want to target the first div child of .node-master:
.node-master > div:first-child {
color: red;
}
You can use the :first-child pseudo selector on the parent:
.node-master div:first-child div.node-content {
color: red;
}
.node-content {
color: blue;
}
<div class="node-master">
<div class="node-1">
<div class="node-content">
child content 1
</div>
</div>
<div class="node-2">
<div class="node-content">
child content 2
</div>
</div>
this is the css to target elements without classes
.node-master > div:nth-child(1){background-color:red;}
.node-master > div:nth-child(2){background-color:blue;}
...
.node-master > div:nth-child(n){background-color:red;}
Hope this may help
Thanks.
You need to have each of the node-contents be unique for the css to appear
<div class = "node-master">
<div class = "node-1">
<div class ="node-content1">
child content 1
</div>
</div>
<div class = "node-2">
<div class ="node-content2">
child content 2
</div>
</div>
And then simply set the color property.
.node-content1 {
color: #1e00ef
}
.node-content2 {
color: #f44336
}
Here you go: https://jsfiddle.net/fvw3xhv8/
How do you give a <p> tag element inside a third <div> tag element in an HTML source code a background color in using CSS Selectors?
You can use the :nth-child() selector for this.
.container div:nth-child(3) p {
color: red;
}
<div class="container">
<div>
<p>Hello</p>
</div>
<div>
<p>I'm</p>
</div>
<div>
<p>Bob</p>
</div>
</div>
Given this HTML as an example, is there a way to target all the elements inside a given <div> individually without having to change each CSS selector.
<div id="div1">
<h3>h3 div 1</h3>
<!-- whole bunch of html here -->
</div>
<div id="div2">
<h3>div 2</h3>
<!-- whole bunch of html here -->
</div>
This is how I normally do it...
#div1 > h3 {
background-color: lightblue;
}
However i am looking for a solution like this (treat this as pseudo code)
#div2 {
h3 {
background-color: lightgreen;
}
}
Here is a fiddle too: https://jsfiddle.net/8bstkq7u/1/
You can use exactly this syntax if you use scss. Change css to scss in your fiddle and your code will work.
This guide is a good point to start: SASS