Is it possible to transition HTML list elements, li, one at a time using CSS? I'm creating IDs for each list element, but I'm not sure if there's an easier, more efficient way to do this.
If I use the CSS child selector
ul > li {
font-size:12pt
transition:all .4s ease 1s;
}
.class:hover ul {
font-size:12pt
}
Won't it apply the same timings to each li element? That's what I'm most concerned with.
you dont need to create IDs for eacg li elements, you can use
ul > :first-child, ul > :last-child, ul > :nthchild for accessing any elements inside
Related
I use a custom CSS stylesheet for CKEditor and want to disable the preview of all styles and format tags on the dropdowns, and just display the name in a div for example. Right now CKEditor create the corresponding tag with the class to style a preview. (like on the screenshot) :
If in the dropdown there is a h2 tag it will display it under block elements in a h2 tag. It make the dropdown inherit the whole site style for h2 tags.
I can do this by adding rules for the specific dropdown but was wondering is there is a built in configuration to stop that in a more generic way. Maybe to force it to always use simple span or div. To have just a classic dropdown, no groups, no style added.
Thanks for your help.
Thanks
This is a bit of a brute force approach but you can override the list item style .cke_panel_listItem with some relevant children selectors in the content.css file.
In this example I'm controlling the display style of h1, h2, h3 and div items in the list:
.cke_panel_listItem h1,
.cke_panel_listItem h2,
.cke_panel_listItem h3,
.cke_panel_listItem div {
font-size: 12px !important;
font-style: normal !important;
font-weight: normal !important;
color: #000000 !important;
background-color: #ffffff !important;
border: none !important;
}
The original style definitions (such as those defined in ckeditor's styles.js file) will still be applied to the selected text, but the dropdown menu itself will display the labels using simple 12px text.
This is my result belowing:
But what I want is put every bars together like this:
And follow the belowing is my major code about legend:
The most traditional (and versatile) way for creating such legends among D3 community is using <text> and <rect> SVG elements (which you can position the way you want). But once you're using HTML <li>, try one of these two approaches in your CSS:
li {
display: inline;
}
Or
li {
float: left;
}
I am using DataTables and it is working marvelously. As it works now when you click on the column header (anywhere on the header) it sorts. And toggles between ascending and descending. But the request now is to have two distinct buttons one that would sort ascending and the other that would sort descending respectively, instead of having the whole header be the active trigger.
Do I have to append to each header and add my own buttons or is there something built into datatables that i am missing.
If i do have to add my own buttons, i'd love being pointed in the right direction.
Thanks a million!
well if the point here is just change the default icons for sorting you can just overwrite this classes
.sorting_asc {
background: url("my_custom_image_asc") no-repeat scroll right center transparent;
}
.sorting_desc {
background: url("my_custom_image_desc") no-repeat scroll right center transparent;
}
Unfortunately there is no builtin functionality for this in jquery dataTables. But it is very easy to implement. Here are the steps :
1) Remove the default header icons, in 1.10.x use this CSS
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
background: none;
}
2) Remove white-space wordwrap and ugly outlines as well
th {
white-space: nowrap;
outline: none;
}
3) Create a class that style the buttons
.sort-btn {
padding: 0px;
float: right;
font-size: 10px;
}
4) After you have initialised the dataTable, cycle through the <th>'s. For each, unbind the default click event, add .asc and .desc buttons, and inject events for ordering the column ascending or descending for each button :
$('#example th').each(function(index, th) {
$(th).unbind('click');
$(th).append('<button class="sort-btn btn-asc">▲</button>');
$(th).append('<button class="sort-btn btn-desc">▼</button>');
$(th).find('.btn-asc').click(function() {
table.column(index).order('asc').draw();
});
$(th).find('.btn-desc').click(function() {
table.column(index).order('desc').draw();
});
});
5) The result looks like this :
demo -> http://jsfiddle.net/wyLzgjv5/
I have a top bar menu (that's based on Zurb's Foundation):
This is the SCSS:
.top-bar {
.top-bar-section {
ul {
#import "menu-icons/*.png";
#include all-menu-icons-sprites;
}
}
}
Now, this does what expected, but the problem is that I want to style the a element inside each li elements (actually, I'd like to apply it to .top-bar.topbar-section.ul.li.a:before).
However, since the site is build in WordPress, and so the menu, I can only assign the class to the li element and I have no idea how to make the Compass's spriting work.
I know, I could customize the way the menu is rendered by WordPress using a walker class, but I'd prefer to try finding a solution simply writing the right SCSS, providing that is possible.
There are a few sprite helper functions to be aware of when the default output isn't exactly what you want:
sprite-url
sprite-position
sprite-names (undocumented)
Using these you can apply the sprite styles to the children of the li elements:
.top-bar .top-bar-section ul > li {
// Generate the sprite map.
$menu-icons-sprite-map: sprite-map("menu-icons/*.png", $layout: smart);
// Set the background image.
> a:before {
background: sprite-url($menu-icons-sprite-map) 0 0 no-repeat;
}
// Set the background position for each sprite.
$menu-icons-sprite-names: sprite-names($menu-icons-sprite-map);
#each $name in $menu-icons-sprite-names {
&.menu-icons-#{$name} > a:before {
background-position: sprite-position($menu-icons-sprite-map, $name);
}
}
}
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!