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>
Related
I have an issue that has been bugging me for hours and I just can figure out how to fix it.
I have created a card (similar to the ones in Bootstrap). I have given it a fixed height. That's all fine.
However, inside the card. I have a div, with a class called "transaction-lines". In it, you have several individual lines inside the div. There could be 1-50.
What I am trying to do is to get the overflow-y working, so that if the height of the "transaction-lines" div is bigger than the fixed height of the card, it will trigger the scroll mode (overflow-y: scroll).
If you look at it now, it doesn't trigger scroll mode correctly. If you remove a few comment lines, from the fiddle, it will look normal.
https://codepen.io/DocRow10/pen/MWQPLzo
<div class="test-card style-one main-details" style="height: 34vh;">
<div class="card-main-content">
<div class="card-main-content-container">
<div class="content-container">
<section class="tab-section">
<div class="transaction-lines">
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
<div class="line">
<div class="indicator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
Test Comment Line
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="card-footer-container">
<div class="card-footer">
<button class="primary-button">Button</button>
<button class="primary-button">Button</button><button class="primary-button">Button</button><button
class="primary-button">Button</button><button class="primary-button">Button</button><button
class="primary-button">Button</button><button class="primary-button">Button</button>
</div>
</div>
</div>
Any help would be appreciated.
Thanks.
I think the instructions below will give you what you're looking for:
Remove height property from .test-card
Add max-height property to .card-main-content (ex: max-height: 150px;)
Add the following CSS to .card-main-content:
overflow: hidden;
overflow-y: auto;
Remove CSS from .tab-section
The idea is that you wan the height of your scrollable area to be defined. You don't set a height on a container and add a scrollable area inside it.
I've figured this out myself, partially thanks to #mdurchholz above, but it was the .card-main-content itself that was overflowing, not the .transaction-lines. The child element (.card-main-content) to the parent you've set the height on (.test-card), is the one that needs the overflow property and not one of it's children.
To resolve this, I had to make the .content-container a direct child of the .test-card and then apply the overflow proprety there. Added flex: 1 to the .content-container, so it would stretch the remaining vertical space of the .test-card. If you have a lot of content in the .content-container, scrolling will now activate, without moving any of the other content, which is exactly what I needed.
Flexbox wasn't relevant to this issue.
Thanks and I hope this is helpful to someone in the future.
As in the code:
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div><span>6</span></div>
<div>7</div>
<div>8</div>
</body>
Find preceding-sibling and self node?
Need to get:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div><span>6</span></div>
I tried to write like this:
//div[span]/self::node()[self::node() and self::node()/preceding-sibling::div]
...but it doesn't work.
This XPath,
//div[span or following-sibling::div[span]]
will select all div elements with a span child or that are siblings before such a div element:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div><span>6</span></div>
as requested.
Alternative, but probably less efficient :
//span[parent::div]/following::div[1]/preceding::div
Select the preceding div elements of the first div which follows the span element.
Output :
Element='<div>1</div>'
Element='<div>2</div>'
Element='<div>3</div>'
Element='<div>4</div>'
Element='<div>5</div>'
Element='<div>
<span>6</span>
</div>'
This question already has answers here:
Style every thing except first child
(4 answers)
How to skip first child?
(5 answers)
Excluding first element in CSS [duplicate]
(2 answers)
Closed 4 years ago.
I want to apply a style to all of the top-level divs within a div excluding the first one. All of attempts using not(:first-child) are recursive. How do to so?
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
.want-to-skip-first-a div:not(:first-child) {
border-top: solid red 11px;
}
Jfiddle: http://jsfiddle.net/GrAaA/85/
Thanks!
If you are just trying to apply the style to all the div tags where you have assigned the "a" class except the first one, then you just need a minor modification to your css.
.want-to-skip-first-a .a:not(:first-child) {
background-color: red;
}
you can do as j08691 suggested and just use the direct child selector (>)
.want-to-skip-first-a>div:not(:first-child) {
border-top: solid red 11px;
}
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
Or you can use the "sibling" selector (+)
.want-to-skip-first-a .a + .a{
border-top:11px solid red;
}
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
Also, i believe your CSS would work if you had specified the class name on the div
.want-to-skip-first-a div.a:not(:first-child) {
border-top: solid red 11px;
}
<div class='want-to-skip-first-a'>
<div class='a'>
<div>1</div>
<div>2</div>
</div>
<div class='a'>
<div>3</div>
<div>4</div>
</div>
<div class='a'>
<div>5</div>
<div>6</div>
</div>
</div>
Any of these should accomplish what you need.
It's easy, you're complicating.
You just need to give the class in the div's you want that css properties.
In this case you have 6 elements, you give the class element to all of them, less than the first one
<div>
<div >1</div>
<div class='want-to-skip-first-a'>2</div>
<div class='want-to-skip-first-a'>3</div>
<div class='want-to-skip-first-a'>4</div>
<div class='want-to-skip-first-a'>5</div>
<div class='want-to-skip-first-a'>6</div>
</div>
Your Solution Is Here
This question already has answers here:
Preventing double borders in CSS Grid
(9 answers)
Closed 4 years ago.
When I try to add justify-self and align-self rules it does center items vertically and horizontally, but problem is when I do so borders wrap around the text instead of expanding all the way to edges.
I'd like to have 1px border around each cell, so they are not doubled if they are adjacent to another cell.
div.around {
width: 490px;
margin: 0 auto;
}
div.padder {
padding: 125px 24px 30px;
}
div.size-chart {
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(9, 1fr);
border: 1px solid #c4c4c4;
}
.size-chart div {
border: 1px solid #c4c4c4;
}
.double-span-col {
grid-column: auto / span 2;
}
.double-span-row {
grid-row: auto / span 2;
}
.size-chart div span {
font-weight: bold;
}
.theader {
background: #e2e2e2;
}
<div class="around">
<div class="padder">
<h2>Size Guide</h2>
<div class="size-chart">
<div class="double-span-col theader">
<span>US</span>
</div>
<div class="theader">
<span>UK</span>
</div>
<div class="theader">
<span>FRANCE</span>
</div>
<div class="theader">
<span>ITALY</span>
</div>
<div class="theader">
<span>JAPAN</span>
</div>
<div class="theader">
<span>BUST <i>(IN)</i></span>
</div>
<div class="theader">
<span>WAIST <i>(IN)</i></span>
</div>
<div class="theader">
<span>HIP <i>(IN)</i></span>
</div>
<div>XXS</div>
<div>00</div>
<div>2</div>
<div>32</div>
<div>34</div>
<div>N/A</div>
<div>30.5</div>
<div>25.5</div>
<div>34.5</div>
<div class="double-span-row">XS</div>
<div>0</div>
<div>4</div>
<div>34</div>
<div>36</div>
<div>5</div>
<div>31.5</div>
<div>25.5</div>
<div>35.5</div>
<div>2</div>
<div>6</div>
<div>36</div>
<div>38</div>
<div>7</div>
<div>32.5</div>
<div>26.5</div>
<div>36.5</div>
<div class="double-span-row">S</div>
<div>4</div>
<div>8</div>
<div>38</div>
<div>40</div>
<div>9</div>
<div>33.5</div>
<div>27.5</div>
<div>37.5</div>
<div>6</div>
<div>10</div>
<div>40</div>
<div>42</div>
<div>11</div>
<div>34.5</div>
<div>28.5</div>
<div>38.5</div>
<div class="double-span-row">M</div>
<div>8</div>
<div>12</div>
<div>42</div>
<div>44</div>
<div>13</div>
<div>35.5</div>
<div>29.5</div>
<div>39.5</div>
<div>10</div>
<div>14</div>
<div>44</div>
<div>46</div>
<div>15</div>
<div>36.5</div>
<div>30.5</div>
<div>40.5</div>
<div>L</div>
<div>12</div>
<div>16</div>
<div>46</div>
<div>48</div>
<div>17</div>
<div>37.5</div>
<div>31.5</div>
<div>41.5</div>
</div>
</div>
</div>
Did you try to use HTML <table> instead? Like:
<table style="width:100%">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
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 -->