I have standrat floating grid, somethig like:
ul li{
width:300px;
float:left;
}
I need to 4th element go under 3thd one. Like on the picture.
thanks for your advise!
Bit of a duct tape solution but could it be fixed by putting Column 3 & 4 in the same container?
eg:
<ul>
<li>
(Column 1)
</li>
<li>
(Column 2)
</li>
<li>
<div style="float:left;">
(Column 3), (Column 4)
</div>
</li>
<li>
(Column 5)
</li>
</ul>
So here is one solution depended on ForeverStuck idea.
Little jQuery:
//Select element3 and 4 wrap them as li
$('ul > li:nth-child(3), ul > li:nth-child(4)').wrapAll( "<li />");
//Then unwrap inside li elements, so 3 and 4 become 3 element
$('.homepage .box-category > li > li > a').unwrap();
Related
I need to select the last element A, from an ul li list
CSS like .items:last-child, get the li, but i need only the A related to LINK 3
<ul id="menu">
<li id="items">Link 1
<li id="items">Link 2
<li id="items">Link 3
</ul>
you can use > a a to get immediate child of type a directly:
.items:last-child > a {
/* your css here... */
}
by the way, just noticed that you are using id attribute for items, in that case you need to switch to:
#items:last-child > a {
/* your css here... */
}
I have an html like this
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<ul>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
</ul>
<li>1.4</li>
<li>1.5</li>
<ul>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
<li>1.6</li>
<li>1.7</li>
<li>1.8</li>
</ul>
How can I target only the last and first 3 child? In my html I want only 1.1, 1.2, 1.3, 1.6, 1.7 and 1.8 will be target.
This is what I tried but it target also the li inside of ul's children ul
First, you need a way to identify the ul you are interested in. You can add a class or id to the outermost ul so that your selectors don't target other ul's. (If editing the HTML is not an option, you can use the parent element in your selector, and select only direct descendant ul's.)
Next, use the right selectors, to get the first and last 3 children.
To select first 3 children:
ul.top > li:nth-child(-n+3)
To select last 3 children:
ul.top > li:nth-last-child(-n+3)
See it here.
I had to target everything but the last and first 3 children.
ul>*:not(:nth-child(-n+3)):not(:nth-last-child(-n+3)) {
background-color: orange;
}
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<ul>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
</ul>
<li>1.4</li>
<li>1.5</li>
<ul>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
<li>1.6</li>
<li>1.7</li>
<li>1.8</li>
</ul>
I have a jquery mobile listview, and I'd like to make one of the li items appear first in the list via css without moving the li item in the code. I don't want the li item to be in a fixed position (in other words, I do want it to scroll with the list). I just want it to appear as though it were the first li item.
Here is the code for the list (just 2 li items). So I'm wondering how I could style the second li to appear first.
<div data-role="page" data-theme="c">
<div data-role="content">
<ul data-role="listview" data-inset="false"><li>
<a href="http://domain.com/1XyK?id=1117448578">
<img src="https://domain.com/moreicon/EN/bundle-loseweight.png" />
<h2>Healthy Weight Loss</h2>
<p>Now includes Mindful Eating!</p>
<span class="ui-li-count">NEW</span>
</a>
</li>
<li>
<a href="http://domain.com?id=977040364">
<img src="https://domain.com/moreicon/EN/bundle-top10.png" />
<h2>Our Top 10 Apps!</h2>
<p>Save BIG on our chart toppers!</p>
<span class="ui-li-count">SAVE</span>
</a>
</li>
Is that possible?
One possibility, if your browser support allows for it, is Flexbox. This allows you to control the order of elements by using the order property on the child.
For example, if your HTML is:
<ul>
<li>First</li>
<li>Second</li>
</ul>
Then, you can style the UL as a columnar flexbox in CSS:
ul {
display: flex;
flex-direction: column;
}
And you can assign a negative order to the child you want to bring to the top:
ul li:nth-of-type(2) {
order: -1;
}
Working example: http://codepen.io/honzie/pen/oLxENz
I have a list of ul with 9 items, that I want to split into 2 columns. The first one to have the first 4 items and the second column to have the other 5 items.
I used this css
ul { -webkit-columns: 2; -moz-columns: 2; columns: 2; }
HTML
<div class="footernav">
<ul class="footer-lt">
<li><a>Home</a></li>
<li><a>Resort Overview</a></li>
<li><a>Photo Gallery</a></li>
<li><a>Contact Us</a></li>
<li class="footertextcolor">Phone</li>
<li>+000 60 275-737<li>
<li class="footertextcolor">Address</li>
<li>Armenia, Yerevan,</li>
<li>G. Hovsepyan </li>
</ul>
</div>
but i get 5 items in the first column and 4 in the second. Is there a way I can specify where the break happens?
Honestly, you are probably better off making 2 ul tags. There does not seem to be a way to accomplish 2 unequal columns using that CSS property, unless of course you throw some blank li tags in there when needed.
This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
div > p {
background-color: yellow;
}
doesn't appear to evaluate any differently than
div p {
background-color: yellow;
}
But would there be an effect I am unaware of? It seems that using the > is more proper style, at least.
There is a difference; > is "immediately follows". So your div > p would apply to the p here:
<div>
<p>Text here</p>
</div>
but not here:
<div>
<table>
<tr>
<td>
<p>Text here</p>
</td>
</tr>
</table>
</div>
A more detailed description can be found within the CSS specification for child selectors.
Look at this example it might help you ...
div#container > ul {
border: 1px solid black;
}
.......
<div id="container"> <ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li> </ul> </div>
A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines.
.......
Read this : http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
it will help you .
div > p selects the direct child p (only the sons),
div p selects all its children p, now matter how deep it is in the hierarchy (including the grandsons and great grandsons).
div>p
indicates a P which is a DIRECT child of div
div p
indicates a p that is descendent of div, not
Check Fiddle for example.
The > selector is used to select child elements of a particular elemnent.