I've got this HTML structure and I want to target divs in CSS like this :
<div></div>
<div></div>
<div></div>
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
<div></div> <!-- SPECIFIC STYLE -->
I don't know how to target these divs in CSS, using nth-child ?
Edit: No using classes
Here you go.
div:nth-child(4),
div:nth-child(5),
div:nth-child(6),
div:nth-child(11),
div:nth-child(12),
div:nth-child(13) {
/*your style*/
}
Note: This solution, of course, is only useful if you can't add classes to the specific divs in question. Also, it would apply to any sequence of divs in your site. So, you should probably point a div id for a parent before the div part, if you choose to use this method.
This is running code try this
div:nth-child(4){
color:red;
}
div:nth-child(5){
color:blue;
}
div:nth-child(6){
color:white;
}
div:nth-child(11){
color:orange;
}
div:nth-child(12){
color:pink;
}
div:nth-child(13){
color:yellow;
}
<div>no style</div>
<div>no style</div>
<div>no style</div>
<div>red</div> <!-- SPECIFIC STYLE -->
<div>blue</div> <!-- SPECIFIC STYLE -->
<div>white</div> <!-- SPECIFIC STYLE -->
<div>no style</div>
<div>no style</div>
<div>no style</div>
<div>no style</div>
<div>orange</div> <!-- SPECIFIC STYLE -->
<div>pink</div> <!-- SPECIFIC STYLE -->
<div>yellow</div> <!-- SPECIFIC STYLE -->
You can add a class to the div you need to style. The sample is given below:
<div></div>
<div></div>
<div></div>
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div>
<div></div>
<div></div>
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
<div class="specific_style"></div> <!-- SPECIFIC STYLE -->
and in CSS update by using the class like .specific_style { //styles }
Hope This is helpful
Something like this?
div {
float: left;
width: 50px;
height: 50px;
border: solid 1px black;
background-color: #babafe;
}
.your-style {
background-color: #bafeba;
}
<div></div>
<div></div>
<div></div>
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div>
<div></div>
<div></div>
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
<div class="your-style"></div> <!-- SPECIFIC STYLE -->
Related
Originally split off from this question.
If I use this css, the span's text color is determined by its closest parent (i.e. text is blue):
.blue {
color: blue;
}
.green {
color: green;
}
<div class="green">
<!-- more divs with color classes -->
<div class="blue">
<div>
<!-- Unknown depth without color classes -->
<div>
<div class="my-component">
<span>Hello World</span>
</div>
</div>
<!-- -->
</div>
</div>
<!-- -->
</div>
However, I want this behavior for .my-component specifically. I therefore added .my-component to my selector but suddenly, the span's text color is determined by the definition order (i.e. text is green):
.blue .my-component {
color: blue;
}
.green .my-component {
color: green;
}
<div class="green">
<!-- more divs with color classes -->
<div class="blue">
<div>
<!-- Unknown depth without color classes -->
<div>
<div class="my-component">
<span>Hello World</span>
</div>
</div>
<!-- -->
</div>
</div>
<!-- -->
</div>
I understand why this is (specificity; see Can a component be styled based on its closest parent in pure CSS?) but would like to know how to work around it.
Is there a way to get the second example to behave as the first (only using CSS/HTML)?
Use CSS variables. The closest class will override all the previous ones and win the game.
.blue {
--c: blue;
}
.green {
--c: green;
}
.my-component {
color: var(--c);
}
<div class="green">
<!-- more divs with color classes -->
<div class="blue">
<div>
<!-- Unknown depth without color classes -->
<div>
<div class="my-component">
<span>Hello World</span>
</div>
</div>
<!-- -->
</div>
</div>
<!-- -->
</div>
Fight specificity with specificity.
UPDATE: use the default :root selector as a starting point, to override other rules.
:root .blue .my-component {
color: blue;
}
.green .my-component {
color: green;
}
<div class="green">
<!-- more divs with color classes -->
<div class="blue">
<div>
<!-- Unknown depth without color classes -->
<div>
<div class="my-component">
<span>Hello World</span>
</div>
</div>
<!-- -->
</div>
</div>
<!-- -->
</div>
I am trying to create a chat application. Inside the chat container, I will add both sent and received messages. It is clear that the messages will not be in a specific order.
I need to add some margin at the end of each repeated series of sent or received messages.
<div class="container">
<div class="sent_message"></div>
<div class="sent_message"></div>
<!-- NEED MARGIN -->
<div class="received_message"></div>
<div class="received_message"></div>
<div class="received_message"></div>
<!-- NEED MARGIN -->
<div class="sent_message"></div>
<!-- NEED MARGIN -->
<div class="received_message"></div>
<!-- NEED MARGIN -->
<div class="sent_message"></div>
<div class="sent_message"></div>
<!-- NEED MARGIN -->
</div>
Is there any CSS selector to select the last-child of each of the series of classes, or should I change the structure of the HTML?
You could select each .received_message follwed by a .sent_message and vice-versa, instead, using the selector .received_message + .sent_message, .sent_message + .received_message.
.received_message + .sent_message, .sent_message + .received_message{
margin-top: 20px;
}
.container div{
width: 120px;
height: 40px;
border: 1px dashed white;
}
.received_message{
background: rebeccapurple;
}
.sent_message{
background: orange;
}
<div class="container">
<div class="sent_message"></div>
<div class="sent_message"></div>
<!-- NEED MARGIN -->
<div class="received_message"></div>
<div class="received_message"></div>
<div class="received_message"></div>
<!-- NEED MARGIN -->
<div class="sent_message"></div>
<!-- NEED MARGIN -->
<div class="received_message"></div>
<!-- NEED MARGIN -->
<div class="sent_message"></div>
<div class="sent_message"></div>
<!-- NEED MARGIN -->
</div>
I've got this HTML structure and I want to target divs in CSS like this :
<div></div>
<div></div>
<div></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div>
<div></div> <!-- SPECIFIC STYLE -->
<div></div>
<div></div>
<div></div> <!-- SPECIFIC STYLE -->
I don't know how to target these divs in CSS, using nth-child ?
Since you want to change style of every third element.You can do:
div:nth-child(3n+0) {
color: red;
}
<div>1</div>
<div>2</div>
<div>3</div> <!-- SPECIFIC STYLE -->
<div>4</div>
<div>5</div>
<div>6</div> <!-- SPECIFIC STYLE -->
<div>7</div>
<div>8</div>
<div>9</div> <!-- SPECIFIC STYLE -->
Here is the css, as your div sibling styles is applied to multiple of 3.. ie third, sixth, nineth....
div:nth-child(3n) {
background: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
div{background-color:red;}
div:nth-child(3n){background-color:black;}
</style>
</head>
<body>
<div>A</div>
<div>B</div>
<div>C</div> <!-- SPECIFIC STYLE -->
<div>D</div>
<div>E</div>
<div>F</div> <!-- SPECIFIC STYLE -->
<div>G</div>
<div>H</div>
<div>I</div> <!-- SPECIFIC STYLE -->
</body>
</html>
Here's my code
HTML:
<body>
<div id="wrapper"> <!--wrap for all the page-->
<div id="header"> <!-- div for top part-->
<!--<p><img src="image/bannerwithologo.jpg"></p>-->
<div id="txtlogo"> <!-- inside header for text-->
<p>HANA Squad</p>
</div>
<div id="menu"> <!-- inside header for menu-->
<p href=#>Vidéos</p>
<p href=#>Photos</p>
<p href=#>Agenda</p>
</div>
</div>
<div id="contenu"> <!-- contents-->
<div id="welcoming"> <!-- short presentation of the website-->
</div>
</div>
</body>
CSS:
.header {background-image: url('../image/banner.jpg');
height:500px;
width: 500px;
Don't care about the comment in my div header, i was trying something else and didn't erase it
It is not a problem of files directory because if i put the background-image in html in the css, my image is showing up
I have tried to put different size of my div header but ... Not working
I know it's a stupid problem ..
<div id="header"> you use an id in your code then you have to use a # in your css for an id declaration.
#header {background-image: url('../image/banner.jpg');
height:500px;
width: 500px;
for your code you have to set a class for example
<div class="header">
The problem is that your header in your HTML is an id (id="header") yet your CSS is targeting a class (.header).
You need to either switch your CSS to target the id, or change your HTML to be a <div class="header"></div>. For what it's worth, it's generally accepted that for more maintainable CSS, you should favour classes over IDs. So I'd go with the latter of the two options.
Here is your Answer
#header {background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
height:500px;
width: 500px;
}
<body>
<div id="wrapper"> <!--wrap for all the page-->
<div id="header"> <!-- div for top part-->
<!--<p><img src="image/bannerwithologo.jpg"></p>-->
<div id="txtlogo"> <!-- inside header for text-->
<p>HANA Squad</p>
</div>
<div id="menu"> <!-- inside header for menu-->
<p href=#>Vidéos</p>
<p href=#>Photos</p>
<p href=#>Agenda</p>
</div>
</div>
<div id="contenu"> <!-- contents-->
<div id="welcoming"> <!-- short presentation of the website-->
</div>
</div>
</body>
Here is a simplified page struture, where I want to select all images inside the "page"-div and enclosed elements, but not those that are in either "keepoffa" or "keepoffb".
<!DOCTYPE html>
<html lang="en">
<body>
<div class="page">
<img/> <!-- OK -->
<div class="keepoffa">
<img/> <!-- never take this-->
</div>
<div class="keepoffb">
<img/> <!-- never take this-->
</div>
<img/> <!-- OK -->
<div class="subpage">
<img/> <!-- OK -->
<ul>
<li>
<img/> <!-- OK -->
</li>
</ul>
</div>
<ul>
<li>
<img/> <!-- OK -->
</li>
</ul>
<div>
</body>
</html>
Here's what I have thought:
.page img:not(.keepoffa):not(.keepoffb) {
max-width: 300px;
}
But the unwanted divs are not excluded.
How to effectively select the images but exclude the images inside those unwanted divs? CSS-only required.
Use > operator to select the child of .page div. And .subpage img to the another image
.page > img,
.subpage img{
border: 1px solid red;
}
<div class="page">
<img src="http://placehold.it/100x100"/> <!-- OK -->
<div class="keepoffa">
<img src="http://placehold.it/100x100"/> <!-- never take this-->
</div>
<div class="keepoffb">
<img src="http://placehold.it/100x100"/> <!-- never take this-->
</div>
<img src="http://placehold.it/100x100"/> <!-- OK -->
<div class="subpage">
<img src="http://placehold.it/100x100"/> <!-- OK -->
</div>
<div>
You can't use two pseudo-selectors simultaneously (and your selectors weren't correct anyway).
EDIT: Probably the easiest way is something like this:
.page img {
max-width: 300px;
}
.keepoffa img, .keepoffb img {
max-width: initial;
}
Try this:
.page>img,
.page div:not(.keepoffa):not(.keepoffb) img {
max-width: 300px;
}