Just starting working with LESS today... got a question that I am trying to figure out.
Is there a way to apply a style to an LI that has the same class name as its parent UL, without knowing in advance what that class name is?
For example, here is some HTML:
<ul class="random-classname">
<li class="foo">foo</li>
<li class="random-classname">Select Me!</li>
<li class="bar">bar</li>
</ul>
I want to apply a background color to that second element, without using a specific class name in the CSS.
This only answers your question in a very particular use case, which I suspect is not exactly your use case (as it still requires the class name to be put into the css, it just allows the programmer to potentially let another assign it). I offer it here only because someone else may find useful.
If the scenario is such that one knows the "random" name at compile time, the class name could be set as a variable, and then processed like so:
#randomName: random-classname; //set at compile time
.#{randomName} {
straight-property: value;
& > & {
nested-property: value;
}
}
Which would produce:
.random-classname {
straight-property: value;
}
.random-classname > .random-classname {
nested-property: value;
}
The above might be useful if one were building some type of framework, or dynamically setting the variable via php from user input at some other stage. But I believe you were hoping for some "generic" solution in your actual output CSS, which (as the comments noted) is not currently possible, and as they also noted, javascript is your best bet in such a case.
You are overthinking this. Using the selector .random-classname only, regardless if in LESS or CSS, will select both the ul and li...
Related
I'm asking what may be a silly question, and I apologize in advance.
I am working on something without access to the back end. I have this annoying little "magic box" where I can use HTML / CSS.
My question is this: I have a class with a link and I'm trying to hide that specific one.
So in this case I'm trying to hide this .ad_link href="/colt?ban-link=141"
I don't want to hide the entire .ad_link class, Just the specific class with that href attached to it. There are more items under the ad_link class that need to stay unhidden.
I hope my question makes enough sense, please let me know if I need to clarify more.
bigesgunshop.com It's located under the left side, the "colt" image/link
Try this:
.ad_link[href="/colt?ban-link=141"] {
display: none !important;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
or if you can add another class to this link, just add hidden defined as:
.hidden {
display: none !important;
}
Agree to #pawel, but this approach is not very maintainable.
I suggest it's in this case better to hide with inline style:
Foo
Or use an class with more importance to hide the link.
An existing style sheet has a whole bevy of styles defined for the A element strewn all over the place. I find it pretty difficult to track and trace everything.
I then have:
<ul class="nav navbar-nav navbar-right">
<li>xxxxx</li>
<li><a href='...'>yyyyy</a></li>
</ul>
I don't want the A element above to inherit what are in the style sheet. I also do not want to remove the classes for the UL element as there are other side effects. I know I can override the A styles by specifically setting inline styles, but that would be a lot to override. Is there a way to make that A element discard what is defined for A and have every style at its default?
I'm afraid you can't...
Have you thought about javaScript? You could create a snippet that works like this:
function resetCss(element) {
element.style.color = '#000000';
element.style.textDecoration = 'none';
// ...
}
function reset() {
var elements = document.getElementsByTagName('*');
for (element in elements) {
if (element.className == 'reset') {
resetCss(element); // This function is called on every tag with the reset class.
}
}
}
Call reset() when the DOM is ready and give the class reset to all your to-be-reset elements. Example: Link.
No it's not possible I'm afraid (with standard CSS anyway, maybe with a precompiled like LESS). The "normal way" here is to add an identifier to and make a #mylist a { }. You would then have to change each attribute you don't like.
Of course the best thing would be to start over and make the CSS less of a living hell :)
There is one possibility that you can try. It way can rewrite (overload) styles every that you need. Use strict selecting via ">" selector in styles from you body element to you target 'a' (It's important write strict rules from body, but in several case don't need). And place this overloads style after all - rule for overloads styles - should be placed after all or last included. I use this method every day and with bootstrap, select2, foundation, and other libs, i just overwrite styles.
Example (Just consider that you html example placed in "body" and "header" elements):
body > header > .nav.navbar-nav.navbar-right > a { /* You styles that overload all previous for this element */}
Is there a shorthand way to write the following css classes that all have the same style?
.gtlab1-17, .gtlab1-19, .gtlab1-21, .gtlab2-17, .gtlab2-19, .gtlab2-21, .gtlab3-17, .gtlab3-19, .gtlab3-21 {margin-left:-3px;}
I need to avoid picking up:
.gtlab1-16, .gtlab2-16, .gtlab3-16
and
.gtlab1-15, .gtlab2-15, .gtlab3-15
which have different styles.
Thanks.
Mabye try this:
div[class^="gtlab"] {
border: 1px solid magenta;
}
div.gtlab2-16, div.gtlab1-57 {
border: 0;
}
If finds divs that have "gtlab" somewhere in its class, and then override the ones you want to exclude.
reference is here: this site i have bookmarked and i revisit that page all the time http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
You could add the same class to all elements as suggested, but if you dont have access to the html (using CMS or what ever) You could add a class to the elements with jQuery .addClass() and having div[class^="gtlab"] as your selector.
Short answer is:
[class*=gtlab]:not([class*=-16]):not([class*=-15])
But depending on the rest of your code and expected browser support (IE8?), this may not work.
Long answer is, change your HTML if you have that option or just use the long version, it's really not going to cost you much more in terms of coding time or download time and will probably be quicker to render.
Use more classes? It seems like the gtlab2 part is describing one aspect while the number is representing another. Why not split it into two distinct classes that can be used together?
As the title says I would like to create a unique div ID for some class in css. Here is some examples:
http://prntscr.com/29rom4
These two blocks are using the same class in the wordpress' css. They are both named as td_block4.
http://prntscr.com/29rp81
Now I would like to create a unique div in the css file of the wordpress theme, where I can put a different background for each "block4".
Here is the example of what I actually want to do: prntscr.com/29rpvd (not a perfect improvisation) :)
And... when I put (in example):
.td_block4 {background-color:#000;}
...in the css, I get this: prntscr.com/29rqbh , and that's not what I want to get.
I hope I'm clear enough, how can I fix this?
Thanks in advance.
I think you can do that only via javascript.You can attack div data-image's with their background , and on load check it and write some js like ".css('background-image',dataimage)"
Take it easy
Your <div>s are surrounded by some more unique parents, so you can simply do:
.span6 .td_block4 { background-color: #f00; }
.span4 .td_block4 { background-color: #000; }
Sometimes, it's not about hooking onto a unique element you want, but by finding a way to use its parents to hook onto a common element, differentiated by unique parents.
Try jquery for this
$(document).ready(function(e) {
$('.td_block4:first').css('background-color','#000');
});
And you can use css for the rest
My HTML is all marked up, ready to make it rain CSS. The problem is that I have to go back and find out what all my id and class names are so I can get started. What I need is a tool that parses my HTML and spits out a stylesheet with all the possible elements ready to be styled (maybe even with some defaults). Does such a tool exist?
I have a poor man's version of this I have used in the past... this requires jquery and firebug...
<script type="text/javascript">
$(document).ready(function() {
$('*[#id]').each(function() {
console.log('#' + this.id + ' {}');
});
$('*[#class]').each(function() {
$.each($(this).attr('class').split(" "), function() {
console.log('.' + this + ' {}');
});
});
});
</script>
it gives you something like this:
#spinner {}
#log {}
#area {}
.cards {}
.dialog {}
.controller {}
if you want them in "natural" page order instead...
<script type="text/javascript">
$(document).ready(function() {
$('*').each(function() {
if($(this).is('[#id]')) {
console.log('#' + this.id + ' {}');
}
if($(this).is('[#class]')) {
$.each($(this).attr('class').split(" "), function() {
console.log('.' + this + ' {}');
});
}
});
});
</script>
I just load the page with that script in there, then cut and paste the results out of firebug... then obviously, remove the script :)
you'll need to remove the dups manually or just toss in some simple dup checking logic with a map or array or something.. one for IDs and one for classes.
When I first saw this, I thought "Great question! Neat answer, danb!"
After a little thought, I'm not so sure this is a good idea. It's a little like generating event handlers for all controls in an ASP.NET page, or generating CRUD procedures for all tables in a database. I think it's better to create them as needed for two reasons:
Less clutter from empty style declarations
Less temptation to misuse (or underuse) CSS by writing everything at the class level rather than using descendant selectors like (#navigation ul li a).
http://lab.xms.pl/css-generator/ seems to fit the description.
I agree with Jon, but I don't see a problem* with doing what the OP wants. Using the script provided, you'd know all of your classes and ids. While working on your CSS, you should be deciding if you need to use each of them. At the end, or at the point that you feel like you have a good handle on what you're doing, run it through an optimizer / compressor so it removes unused ids and classes.
*Operating assumption: You either didn't write the original HTML or you wrote it and later decided that "gosh CSS would be really nice here now, I wish I would have started with it." :-)
Not that it isn't a sensible question with a sensible answer, but it implied to me the kind of unnecessarily marked-up HTML that people create when they don't understand positional selectors: the kind of code where everything has a class and an id.
<div id="nav">
<ul id="nav_list">
<li class="nav_list_item">
<a class="navlist_item_link" href="foo">foo</a>
</li>
<li class="nav_list_item">
<a class="navlist_item_link" href="bar">bar</a>
</li>
<li class="nav_list_item">
<a class="navlist_item_link" href="baz">baz</a>
</li>
</ul>
</div>
you can remove everything except the id on the div and still be able to style everything there by its position; and obviously, the script won't show you all those possible selectors, will it?
In other words, a narrow focus on CSS as something done to classes and ids is a concern.
This blog entry references to something similar to what you need here.
It contains a link to a Perl script called 'stylizator.pl'. This script parses the html to look for possible CSS elements and outputs them to a file.
Another way to approach this is to standardise the id and class names you use in your HTML according to some sort of naming convention.
I disagree with Jon. While this solution can be used poorly in the way he describes, it does not necessarily mean it will. Any wise developer or designer is going to take the script generated css classes and pull only what is really needed into the css file.
The solution still solves the OP's question.
I've made a generator which makes the html and css for you = https://www.andy-howard.com/css-skeleton-screen-generator/
Not much else to say really, it utilises the :empty selector in css.