This question already has answers here:
Using CSS Target to highlight parent div
(2 answers)
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is there anyway we can target the container of an element? I seems can't find a way, here is an example:
The HTML:
<div class="wrapper">
<div class="content" id="TopSection">
<span>Box A</span>
</div>
</div>
<div class="wrapper">
<div class="content" id="BottomSection">
<span>Box B</span>
</div>
</div>
The wrapper and the content are both has styling class, for example:
.wrapper {
background-color: black;
}
.content {
padding: 10px 20px;
}
How to change the background color of the wrapper on the BottomSection only, without adding anther wrapper class, i.e wrapperB? so can we target the wrapper that contains that ID only?
Try this-
.wrapper {
background-color: black;
}
.wrapper:nth-child(2) {
background-color: orange;
}
.content {
padding: 10px 20px;
}
You can target parents with jQuery, to add a class that you could then target with CSS:
$('#BottomSection').closest('.wrapper').addClass('changeMe');
Related
This question already has answers here:
How to disable margin-collapsing?
(12 answers)
Closed 11 months ago.
Here i have three divs i want the div three to have margin from the top but since then I am giving it the margin to the third div but what and expected to move from the top only bit the complete div is moving
*{
margin:0;
padding:0;
}
.divone{
background-color:red;
}
.divtwo{
margin:10px 4px;
}
.divthree{
display:flex;
justify-content:space-between;
}
<div class="divone">
<div class="divtwo">
<div class="divthree">
<div class="ndiv">
<h3>I am</h3>
</div>
<div class="ndiv">
<h3>Hello</h3>
</div>
</div>
</div>
</div>
According to your code you're currently applying it to .divtwo.
What you actually need to do is apply padding to .divthree to get what you want.
Change your CSS to the following to accomplished that:
*{
margin: 0;
padding: 0;
}
.divone{
background-color: red;
}
.divthree{
display: flex;
justify-content: space-between;
padding: 10px 4px;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why my inline-block divs are not aligned when only one of them has text? [duplicate]
(4 answers)
Closed 1 year ago.
I am trying to keep these two divs on the same line. But whenever I add a P element inside the first Div, it moves to the new line. I have tried assigning display property to "inline-block" to each element, but it doesn't work. Can you please help, I have the following code:
.tile {
height: 100px;
width: 100px;
background-color: rgb(250, 250, 156);
border: 5px solid red;
display: inline-block;
vertical-align:top
}
p {
display: inline;
margin:0;
}
<div class="tile">
<p>Hello</p>
</div>
<div class="tile"></div>
you can use display flex
<html>
<head>
<title>Experiment</title>
</head>
<style>
.container {
display: flex
}
.tile{
height:100px;
width:100px;
background-color: rgb(250, 250, 156);
border:5px solid red;
}
</style>
<body>
<div class="container">
<div class="tile"><p>Hello</p></div>
<div class="tile"></div>
</div>
</body>
</html>
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I want to add background color to odd elements which has .row class in the wrapper element. But another div comes after each .row element so when I add nth-child(odd) selector, background color of all .row elements changes. How can I add with only css?
.wrapper {
border: 1px solid #ccc;
padding: 20px;
}
.row {
padding: 10px;
border-radius: 3px;
}
.description {
margin-bottom: 20px;
padding: 10px;
}
.row:nth-child(odd) {
background: red;
}
<div class="wrapper">
<div class="row">Row-1</div>
<div class="description">Description-1</div>
<div class="row">Row-2</div>
<div class="description">Description-2</div>
<div class="row">Row-3</div>
<div class="description">Description-3</div>
<div class="row">Row-4</div>
<div class="description">Description-4</div>
<div class="row">Row-5</div>
<div class="description">Description-5</div>
</div>
JsBin Example
In this case, if you know perfectly there will be another coming in, out of the even elements, you need to find the even ones. You need to use :nth-child() in a different way:
.row:nth-child(4n + 1) {}
This will select the even items of the even elements.
.wrapper {
border: 1px solid #ccc;
padding: 20px;
}
.row {
padding: 10px;
border-radius: 3px;
}
.description {
margin-bottom: 20px;
padding: 10px;
}
.row:nth-child(4n + 1) {
background: red;
}
<div class="wrapper">
<div class="row">Row-1</div>
<div class="description">Description-1</div>
<div class="row">Row-2</div>
<div class="description">Description-2</div>
<div class="row">Row-3</div>
<div class="description">Description-3</div>
<div class="row">Row-4</div>
<div class="description">Description-4</div>
<div class="row">Row-5</div>
<div class="description">Description-5</div>
</div>
Preview
The way you have your markup setup, you would need to target every 4th div element within .wrapper:
.row:nth-child(4n+1) {
background: red;
}
Keep in mind that this is not flexible, so if you add divs it will disrupt your desired effect of odd numbered .row divs.
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Equal height rows in CSS Grid Layout
(2 answers)
Closed 2 years ago.
Let's say I have a container div with 2 elements
<div class="container" >
<div class="section" ></div>
<div class="text" >Some text</div>
</div>
My question is, how can I write the CSS so that the height of the .text div, containing all the text is as big as the .section div, so for example if
.section{
height: 450px;
}
Then height for .text is also 450px. Or do I need javascript to do this
You can give them both the same percentage height and then set the height based on the parent
.section {
height: 50%;
background: red;
}
.text {
background: green;
height:50%;
}
.container{
height:450px}
<div class="container">
<div class="section"></div>
<div class="text">Some text</div>
</div>
You should put text div inside section div so it affect changes, like this:
<div class="section" >
<div class="text" >Some text</div>
</div>
.section {
height: 450px;
background: red;
}
This question already has answers here:
How to add space between elements so they fill their container div?
(2 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
Now I have two divs under a parent div:
<div id="block_container">
<div id="bloc1">
some words
</div>
<div id="bloc2">
<input placeholder="...">
</div>
</div>
where
#block_container
{
text-align:center;
}
#bloc1, #bloc2
{
display:inline;
}
#contact textarea {
width: 80%;
border: 1px solid #ccc;
background: #FFF;
margin: auto 0 5px;
padding: 10px;
}
This is ok for the two div components to align center. However I would like two align them two to left-right end: [some words <----- Space -----> input box]. I've tried:
#block_container
{
text-align:justify;
}
but that won't work.
Can you please kindly suggest to me how can I achieve this? Thanks.