Hello I need to get CSS selector after active class, for example:
if I have 7 div and one of them have active class I need to get the fourth element after active class.
<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div> <!-- I need to get this selector -->
<div>7</div>
You could use + selector
.active + div + div + div + div {
background:red;
}
<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div> <!-- I need to get this selector -->
<div>7</div>
Related
with Tailwind css i am trying to align image and text on both sides, not matter how the text is image and text started position should not change. can you please tell me what i am missing or doing wrong.
Code: https://play.tailwindcss.com/kFSxJ8tMdD
May be you can try this.
Use content-start to pack rows in a container against the start of the cross axis:
<div class="h-48 flex flex-wrap content-start ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-center to pack rows in a container in the center of the cross axis:
<div class="h-48 flex flex-wrap content-center ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-end to pack rows in a container against the end of the cross axis:
<div class="h-48 flex flex-wrap content-end ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-between to distribute rows in a container such that there is an equal amount of space between each line:
<div class="h-48 flex flex-wrap content-between ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-around to distribute rows in a container such that there is an equal amount of space around each line:
<div class="h-48 flex flex-wrap content-around ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around:
<div class="h-48 flex flex-wrap content-evenly ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="row">
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
<div class="col-lg-4">col lg 4</div>
</div>
How can i apply CSS on 1st column of each 4*4 grid
I try this
.row div:nth-child(4n+0) {
margin-left: 0px;
}
Note: I need only CSS solution for this
see image here
div {
float:left;
height:100px;
width:25%;
background-color:pink;
margin-bottom:10px;
}
div:nth-child(4n-3) {
background-color:green;
}
<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>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
Use "First-child" Pseudo class
CSS Codes
div p:first-child{
color:red;
}
HTML codes
<div>
<p>first </p>
<p>second</p>
<p>third </p>
<p>fourth </p>
</div>
<div>
<p>first </p>
<p>second</p>
<p>third </p>
<p>fourth </p>
</div>
<div>
<p>first </p>
<p>second</p>
<p>third </p>
<p>fourth </p>
</div>
it will change the color of only first paragraph.
I need a selector that will select everything in the X class, except for the Y class objects. Maybe my problem would solve the selector /deep/ but it is not supported.
I have a page structure:
<div class="x">
<div class="y"></div>
<div>
<div>
<div>
<span class="y"></span>
<div>1</div>
<label class="y"></label>
<div>
<span class="y"></span>
<p>2</p>
</div>
</div>
</div>
</div>
<div>
<span class="y"></span>
<div>3</div>
</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
</div>
I need a selector or xpath that will select:
<div>1</div>
<p>2</p>
<div>3</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
I need a general solution.
This XPath,
//div[#class="x"]//*[not(#class="y") and not(.//*[#class="y"])]
will select all div[#class="x"] descendants that do not have a #class="y" attribute and do not have any descendants that have #class="y" elements,
<div>1</div>
<p>2</p>
<div>3</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>4</div>
<div>
<div>5</div>
</div>
<div>5</div>
<div>6</div>
which matches your example if we assume that your example was incomplete.
There is the :has(...) pseudo-class but it cannot be used in stylesheets for performance reasons. This limitation is baked into CSS engines for all browsers because every time they render web pages, they traverse through the entire DOM and apply selectors that match the existing element (and hence haven't yet looked at their children). Instead this pseudo-class is typically used for dedicated selector engines such as Sizzle (known by its development/use for jQuery).
If you wanted to use that pseudo-class, then you could try :not(.y):not(:has(.y)). Then in order to get the topmost results, I select children only of elements that did not match (ie. :has(.y) > :not(:has(.y))). The one caveat comes if an element with class "y" has children. The only way to handle that is to repeat the pseudo-class specifying :not(.y) for as many levels deep that you want to go (I didn't do this). Here's a live example:
// The selector
var elements = $('.x > :not(.y):not(:has(.y)), .x :has(.y) > :not(.y):not(:has(.y))');
// Format the HTML
var html = elements.map(function(){
var dirty = this.outerHTML;
// Get leading whitespace to remove
var leading = (dirty.match(/\r?\n *(?= {4})/) || ['\r\n'])[0];
// Create regex to replace whitespace
var leading = new RegExp(leading.replace(/\r/,'\\r?').replace(/\n/,'\\n'), 'g');
// Show newlines, whitespace in HTML
var cleaned = $('<div>').text(dirty).html().replace(leading, '<br/>').replace(/ /g, ' ');
return cleaned;
}).toArray();
// Add the HTML to the page
var results = $('#results');
for(var i=0; i<html.length; i++) {
results.append($('<li>').html(html[i]));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Sample HTML -->
<div class="x">
<div class="y"></div>
<div>
<div>
<div>
<span class="y"></span>
<div>1</div>
<label class="y"></label>
<div>
<span class="y"></span>
<p>2</p>
</div>
</div>
</div>
</div>
<div>
<span class="y"></span>
<div>3</div>
</div>
<div>
<div>4</div>
<div>
<div>5</div>
</div>
</div>
<div>6</div>
</div>
<h3>Results</h3>
<ol id="results" class="y"></ol>
I want to select all elements with one selector, starting from the 4th. But I dont want to select that 4th, if it is the last element.
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n+4):not(:nth-child(4):last-child) {
background: red;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
jsfiddle:
https://jsfiddle.net/e9fgdeu1/
I think only one selector is not enough to get this. However it can be done with following selector:
.container div:nth-child(n + 5),
.container div:nth-child(4):not(:last-child) {
background: red;
}
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n + 5),
.container div:nth-child(4):not(:last-child) {
background: red;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
.container div {
display: inline-block;
margin: 5px;
}
.container div:nth-child(n+4) {
background: red;
}
.container div:nth-child(4):last-child {
background: none;
}
<div class="container">
<div>1</div>
<div>2</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
six divs - 1 2 3 4 5 6 ....I want div number 2 4 6 to be below divs 1 3 5. Is that possible? Sorry if my explanation is that good. It's kind of hard. Thanks.
http://jsfiddle.net/LkGV8/
<body>
<div class="contain">
<div class="square">
</div>
<div class="rec01">
</div>
<div class="square">
</div>
<div class="rec02">
</div>
<div class="square">
</div>
<div class="rec03">
</div>
</div>
</body>
.contain {
border:1px solid;
width:639px;
height:900px;
background-color:;
}
.square {
width:33%;
height:50px;
float:left;
background-color:grey;
}
.rec01 {
width:100%;
height:50px;
float:right;
background-color:black;
}
.rec02 {
width:100%;
height:50px;
float:right;
background-color:black;
}
.rec03 {
width:100%;
height:50px;
float:right;
background-color:black;
}
(add more details, don't pay attention this.)
DEMO
Not sure if this is what you mean.
Remove float from .square and add display:inline-block to it
.square {
width:32%;
height:50px;
display:inline-block;
background-color:grey;
}
Can't you just shuffle the elements in the markup the way you want them? You can do it with some jQuery.
// not a pretty solution, but should work...
$( ".rec01" ).insertBefore( ".square:eq(0)" );
$( ".rec02" ).insertBefore( ".square:eq(1)" );
$( ".rec03" ).insertBefore( ".square:eq(2)" );
Your question needs an image with how you want the final version to look. This answer is assuming you want the elements 2, 4 and 6 below 1, 3 and 5 respectively.
The answer could be: use a grid.
<h3>Option 1</h3>
<div class="grid">
<div>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</div>
<h3>Option 2</h3>
<div class="grid">
<div>
<div class="grid">
<div>1</div>
<div>3</div>
<div>5</div>
</div>
<div class="grid">
<div>2</div>
<div>4</div>
<div>6</div>
</div>
</div>
</div>
The css and visual is available on JSFiddle.
You can use :nth child as provided in this js fiddle.
As follows:
.contain div:nth-child(odd) {
position:relative;
top:0;
}
.contain div:nth-child(even) {
position:relative;
top:220px;
}