I have the following code:
<ul id="myList">
<li class="li1">Example 1</li>
<li class="li2">Example 2</li>
<li class="li3">Example 3</li>
<li class="li4">Example 4</li>
</ul>
Is there any way i can transform the list to:
<ul class="myList">
<li class="li1"><div class="container">Example 1</div></li>
<li class="li2"><div class="container">Example 2</div></li>
<li class="li3"><div class="container">Example 3</div></li>
<li class="li4"><div class="container">xample 4</div></li>
</ul>
using css only.
without using javascript
CSS cannot add elements, that really isn't its purpose.
That being said, you can achieve a similar effect by making the items display: block, like this:
#myList > li { display: block; }
No. CSS is designed to instruct the browser on how elements look and are positioned. It isn't capable of editing the live HTML.
Related
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 3 years ago.
I would like to apply styling to list items in ordered list (specifically to the ::after or ::before), based on the classes of the <li>. The code for these lists looks like the following:
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
The lists are generated automatically, and the position of the first class2 item may vary inside the list (it can even be absent in some case, leaving only class1 items in the list).
I would like to add something in the ::before of the first item of each class (like a specific header for each type of item in my list). Ending up with something like this:
Example of expected result
Anyone could help me with the CSS selector to use for this? I tried several things with + or ~ but nothing works seems for now...
Thanks!
David
There is no :first-of-class selector available, but you can use the general sibling combinator to remove the pseudo element for all elements with the same class, that are following the first one:
.class1::before { content:"some header for class 1"; display:block; }
.class2::before { content:"some header for class 2"; display:block; }
.class1 ~ .class1::before, .class2 ~ .class2::before { content: none; }
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
You can use a section tag to define a header for your list.
<section>
<h3>Reference Document</h3>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
I'm trying to show a horizontally center-aligned Foundation 6 dropdown. I'm attempting to use a dropdown as a tooltip, because it better fits my needs and allows for rich HTML to be inserted into it, where the tooltip does not.
Foundation 6 dropdowns can be positioned by adding classes .top .right .bottom .left. These classes are parsed by the Foundation core Javascript and then the element is given dynamically calculated top: and left: attributes.
Because of this, adding any left, or transform: translate properties to the element are voided by the fact that Foundation takes this into account when dynamically calculating the positioning attributes.
Any ideas short of writing a different class into the javascript?
Use text-center.
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu text-center">
<li>Item 1A</li>
<li>Item 1b</li>
<li>Item 1c</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
In Short
I need to be able to activate a menu on hover while I'm dragging a sortable object. Is this possible?
The context:
I have a nav menu that's being powered by cssmenu, which basically takes list items and arranges them into a nice clean menu structure. I'd like to connect the lists in the nav menu and be able to rearrange the elements with jqueryui sortable connected lists. I can get the connected lists to work separately (outside of the cssmenu) and within one menu of a particular list. The problem is when I try to drag from one menu item to another, the drop-down isn't activated.
You can see in this fiddle that I can sort objects within a list but I can't activate the drop-down menu to drag it into another list (i.e. drag from the yellow list to the blue list or vice versa):
http://jsfiddle.net/9j5wyoLn/
html
<div id='cssmenu'>
<ul id='subNavElements'>
<li class='active has-sub'><a href='#'><span>About Us</span></a>
<ul id="sortable1" class="connectedSortable">
<li class="">Item 1</li>
<li class="">Item 2</li>
<li class="">Item 3</li>
<li class="">Item 4</li>
</ul>
</li>
<li class='active has-sub'><a href='#'><span>Articles</span></a>
<ul id="sortable2" class="connectedSortable">
<li class="">Article 1</li>
<li class="">Article 2</li>
<li class="">Article 3</li>
<li class="">Article 4</li>
</ul>
</li>
</ul>
</div>
js
//make sortable
$(document).ready(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
css: handled in fiddle (too much to show below)
Figured it out...
I added a class in the css called "openSaysMe" which styles the elements to appear.
#cssmenu .openSaysMe {
left: auto;
top: 34px;
opacity: 1;
}
Then I added the class when the items are being sorted, took the class away once the sorting was complete.
$( "#sortable1, #sortable2, #sortable3" ).sortable({
connectWith: ".connectedSortable",
sort: function( event, ui ) {
$('#cssmenu ul ul').addClass('openSaysMe');
},
beforeStop: function( event, ui ) {
$('#cssmenu ul ul').removeClass('openSaysMe');
}
}).disableSelection();
Here's a fiddle: http://jsfiddle.net/9j5wyoLn/2/
I have a bunch of incremented elements
<ul>
<li id="idTab1">
<li id="idTab2">
<li id="multiTab1">
<li id="multiTab2">
<li id="multiTab3">
<li id="idTab3">
</ul>
Is there some CSS selector method for me to select all 'multiTab' elements? something like 'li #multiTab*' ? :P
You can use ^=, example:
li[id^="mulitiTab"]
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.