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>'
Related
I have an array of N elements:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
I need to make two columns in following order:
If we have 10 elements:
1 6
2 7
3 8
4 9
5 10
If we have 9 elements:
1 6
2 7
3 8
4 9
5
If we have 7 elements:
1 5
2 6
3 7
4
And so on. CSS should devide elements into two columns.
The number of elements isn't a constant.
The code in react is pretty simple:
numList.map(item => (
<div>{item}</div>
))
I can devide elements array into two arrays using js and then render it as two list separatelly and make columns for it with flex.
But I wish to know if there a way to do it with CSS only without JS.
How do I make two columns with CSS?
Based on your examples, I think just a simple columns: 2 would have this functionality.
body {
display: flex;
flex-direction: column;
gap: 20px;
}
.wrapper {
columns: 2;
border: 1px solid black;
}
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
You can use grid-template-columns property and specifies the number (and the widths) of columns in a grid layout. The values are a space separated list, where each value specifies the size of the respective column.
Refer this: CSS Grid Layout Module
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 20px 20px;
}
For this example, I specified each column only 20px width, you can put your own numbers or auto for the width.
You can also use repeat function to repeat same pattern of column multiple of times. For example:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 50px);
}
Best way is to give class to parent div and give display as grid and in column give how many element you want in one column
.container{
display:grid;
grid-template-columns: repeat(5,1fr)}
<div class="container">
<div></div>
<div></div>
<div></div>
</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
I want to achieve the following: I have a total of 12 divs, inside one div.
Depending on the media query (tablet portrait, tablet landscape, mobile portrait, mobile landscape etc..),I want to show three columns with four divs inside or four columns with three divs inside.
This should be the end results:
3 columns, four divs per column
4 columns, three divs per column
I'm having problems with figuring out an way to achieve this with CSS only.
<div className="cb-Categorie-Wrapper">
<div className="cb-Categorie" id="categorie-Fictie"><span className="label">Fictie</span></div>
<div className="cb-Categorie" id="categorie-Thrillers-spanning" ><span className="label">Thrillers en spanning</span></div>
<div className="cb-Categorie" id="categorie-Romantiek"><span className="label">Romantiek</span></div>
<div className="cb-Categorie" id="categorie-Kinderen-YA"><span className="label">Kinderen en YA</span></div>
<div className="cb-Categorie" id="categorie-Non-fictie"><span className="label">Non-fictie</span></div>
<div className="cb-Categorie" id="categorie-Reizen"><span className="label">Reizen</span></div>
<div className="cb-Categorie" id="categorie-Mens-ontwikkeling"><span className="label">Mens en ontwikkeling</span></div>
<div className="cb-Categorie" id="categorie-Management"><span className="label">Management</span></div>
<div className="cb-Categorie" id="categorie-Educatief"><span className="label">Educatief</span></div>
<div className="cb-Categorie" id="categorie-Engels"><span className="label">Engelse boeken</span></div>
<div className="cb-Categorie" id="categorie-Anderstalig"><span className="label">Andere anderstalige boeken</span></div>
<div className="cb-Categorie" id="categorie-Non-books"><span className="label">Non-books</span></div>
</div>
I enclosed every three divs with an wrapper div that would be an block, with float:left (see picture: 4 columns, three divs per column), this made four columns next to eachother.
But now the wish is to have the columns as picture 1 (3 columns, four divs).
I am able to use Bootstrap3 if that's helpful.
.column-example {
column-count: 4;
column-rule-style: solid;
column-rule-color: #ff0000;
}
<div class="column-example">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
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> <!-- 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>