Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 months ago.
Improve this question
I have this nested html
i want to access the second sibling, whose parent is div of class "x"
i tried using
.x div:nth-child(2) {
padding-bottom: 30px;
margin-bottom: 30px;
}
<div class="x">
<div>.....</div>
<div> The One i want to change it's style</div>
</div>
The code works.
Its working, please see below. I have also added a child selector > . But without that also it should work.
.x > div:nth-child(2) {
padding-bottom: 30px;
margin-bottom: 30px;
border: 1px solid red;
color:red;
}
<div class="x">
<div>.....</div>
<div> The One i want to change it's style</div>
<div>third div</div>
</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
html code
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
css code?
I need the css code and I want it in center of the bage while the border on under the word only and not all the line .
If you want just the title characters to be underlined and not the whole width of the title class element, then a simple text-align center will do it with the h1 display setting changed and the border set on that.
.title-content {
text-align: center;
}
.h1 {
border-bottom: 1px black solid;
display: inline-block;
}
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
If you want more complex layout then probably investigating flex would be useful.
You could add it to the .title-content class using CSS.
.title-content {
display: flex;
justify-content: center;
}
.title-content h1 {
border-bottom: 1px solid black;
}
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm currently stuck on a problem, I have tried using ".test" "#test" and "test" but nothing seems to select what I'm trying to work on. Below is the code I'm working on.
HTML
#test {
width: 40px;
height: 40px;
}
<div id="content">
<div id="test">
<img src="pictures/furniturepic1.jpg" alt="Furniture Picture" />
</div>
</div>
if your css file is linked properly with your html file. this one is going to work for you.
here is the css code:
div#content div#test {
width: 40px;
height: 40px;
}
or
#content #test {
background-color: blue;
width: 50px;
height: 50px;
}
both is going to work for you
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
How can I select all the elements after a checked?
input:checked + .box
{
border: 2px solid black;
}
only set border a .box but i want do it to all elements after checked
You can wrap all elements after the checkbox in a common element and this way they will all depend on the checkbox.
<input type="checkbox">
<div class="boxes-wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
And then in the CSS:
input[type=checkbox]:checked + .boxes-wrapper .box {
border: 2px solid black;
}
http://plnkr.co/edit/TyLhnjGfwL0IKXJFcPRu?p=preview
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
Good morning. I am starting with HTML but I did not find why we can use a few class names in one element like at this screenshot. Here's 3 class names in one element
You can have as many classes as you want, and they will show as long as there's a corresponding CSS declaration for it. If there isn't one, you can still assign class to the HTML
.square {
width: 120px;
height: 120px;
}
.blue {
color: blue;
}
.red {
background-color: red;
}
.bordered {
border: solid black 3px;
}
.round {
border-radius: 10px;
}
<div class="square blue red bordered round this-class-is-not-here">Hello there </div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Can some one explain the following css code I found in a web page and which element does the section.positioned affect?
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 500px;
box-shadow: 0 0 15px #333;
}
Part of web page code
<section class="">
<div class="container">
......
</div>
</section>
The section.positioned rule target an element like this:
<section class="positioned">
</section>
By changing the existing html section element's class from empty to "positioned", the section.positioned rule will apply to the element instead of the section rule.
Added:
What section.positioned really means is it target an element of type "section" which has a class named "positioned".
Further reading about css selectors:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
What does the dot mean in CSS?