I have a list with category headers, and items nested in those headers. If I do
#list .item:nth-child(1):before{content:"1";}
the first item in each category gets prefixed with a 1. This is somewhat unexpected. I guess I am looking for an nth-item() plugin.
What are my options given I do not control the html, its changing dynamically and I don't want to monitor it with jQuery. I was hoping for a CSS solution.
Link to Fiddle
You can alternatively use a CSS counter
http://jsfiddle.net/6tN5U/
body {
counter-reset: item;
}
.item{
margin-left:20px;
}
#items .item:before{counter-increment: item; content: counter(item) " ";}
Related
I need to know if I can modify content on the last page with the :last selector.
I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page.
But I can't find it in the documentation and it does not work when I try to use it.
I'm trying to clear the content on the footer of my last page like this:
#page {
#bottom-right {
content: "Please turn over";
}
}
#page :last {
#bottom-right {
content: none;
}
}
It works when I use it with the :firstselector. How can I get the effect for the last page?
I'm using Weasyprint to print PDF files.
This can be achieved using named pages.
Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.
Example below:
HTML
<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->
CSS
.last-page {
page: last_page;
page-break-before: always; /* Use if your last page is blank, else omit. */
}
#page {
#bottom-right {
content: "Please turn over";
}
}
#page last_page {
#bottom-right {
content: none;
}
}
Tested with Weasyprint - worked a charm.
Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).
It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.
I'm using the following css to display a step counter:
:before {
content: "step " counter(fieldsets);
counter-increment: fieldsets;
/* Some more css */
}
But I was wondered if it was possible to display the total number of elements as well, like so:
:before {
content: "step " counter(fieldsets) " of " total_number_of_fieldsets;
counter-increment: fieldsets
/* Some more css */
}
I would love it to be a pure css solution, is that possible?
Unless you have something else that calculate the total_number_of_fieldsets count in the CSS, it is not possible.
See this fiddle: http://jsfiddle.net/EawLA/
You can show the total :after
Note that this will not work in IE<9 as pseudo elements are not supported
CSS cannot inspect the DOM or use variables, therefore it cannot pull up this inforamtion.
is there a way with pure css to Have a link that might say "New! Watch Video" and then once someone has clicked the link have it remove the "New" portion of the link. I'm assuming this can be done w/ Jquery but I'd like to see if there is an way to remove it with just css.
Rather than removing words, add the word "New" if the link hasn't been visited yet
a:before {
content: "New! ";
}
a:visited:before {
content: "";
}
No extra markup, and you don't need to put the word "New" everywhere.
Wrap the "New!" in a span inside the anchor:
<a class="newText" href="somepage.html"><span>New! </span>Watch video</a>
and in your CSS, set:
a.newText:visited span { display: none; }
I would recommend using a class on the anchor (like "newText" above) so that this formatting will only be applied to the links you want it on. And keep in mind that the "New!" text will reappear if the user clears their browser history.
Assuming the anchor will take you to a new page you can use the following technique:
a:before {
content: "New! ";
}
On any page you wish to remove or change it, you can add a body class
body.blah a:before {
content: "";
}
So I have a list of menu items and I'm trying to figure out if I should use spans with class attributes or definition lists for the characteristics of each item. Here are the two options I am considering:
Option 1)
// HAML Markup
%article.menu-item
%span.name
Cereal
%span.price
4.00
%span.description
We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.
// Styling
article.menu-item {
.price:before { content: "$"; }
}
Option 2)
// HAML Markup
%article.menu-item
%dl
%dt
Item
%dd
Cereal
%dt
Price
%dd
4.00
%dt
Description
%dd
We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included.
// Styling
article.menu-item {
.price:before { content: "$"; }
dt { display: none; }
}
I'm currently using option 1, but for some reason option two appears to me to be semantically richer since it defines the product. Which option should I go with and why?
If you're going to go with the second you shouldn't use display: none;. You'd be better off positioning the text off screen so screen readers can still get at it.
dt {
position: absolute;
left: -9999px;
top: -9999px;
}
I say go with the semantically richer code (2) and hide the dt. maybe be more specific about which dts you're hiding: article.menu-item.dt {display: none }. it will make the text more readable, and avoid span and div soup in your code.
Is it possible to add additional rules to a css block when using a "{ (properties of x) }" selector?
I looked at references but I can't find anything related to "properties of x". A link would be wonderful. I tried the following two combinations, but neither worked:
.dock li { (properties of grid_2; display:inline; background-color:#666; ) }
.dock li { display:inline; background-color:#666; (properties of grid_2) }
Many thanks!
EDIT
Apparently I misread an article and thought that such a syntax existed. I thought one could create a class and let it inherit the properties of another using such syntax, which is evidently not the case.
CSS does not have such a feature.
What you are describing is not possible. I think there are two other possibilities you could maybe use. The first is, that you need to know that several styles can be applied to an element at the same time. I'll give you an example:
li { font-size: 10pt; }
.dock li { color: #ff0000; }
All list items will be formatted with a font size of 10 points and only those within an element containing the dock class will be red.
My second suggestion is that you try applying two or more classes to your HTML element, for instance:
.grid li { font-size: 10pt; }
.dock li { color: #ff0000; }
Now put the grid and dock class into your HTML, and the elements will apply both style definitions:
<ul class="grid dock"> ...
Whatever you consider best for your project: remember that the properties defined in the second style overwrite the properties of the first one (if they do not define the same properties at all, there will be no confusion).
maybe your question is not too strange..
What I understand is that you want to do something like:
.a { prop1: val; prop2: val; }
.b { prop3: val; prop4: val; }
.c { .a; .b; prop5: val; prop6: val; }
You want the class .c to inherit all the properties and values of .a and .b
If this is ok, you can do that using LESS.
To use your LESS code in your sites you have different ways to do it.
First of all check the original site: LESS.org
If you are on Mac check this site: LESS APP + PLUGINS
If you are on PC the less.js plugin should be easier to implement LESS in your sites: less.js usage
Hope it helps.
Happy coding y'all! :)