I saw the following line in a code:
.className.className {
font-weight: bold;
}
Is there a reason to write this twice?
It is likely used to increase the specificity of the selector.
It would probably be better if it was rewritten to change the source order instead.
Typo maybe. below is valid though.
All <li> elements with a class list that includes both "spacious" and "elegant"
For example, class="elegant retro spacious"
li.spacious.elegant {
margin: 2em;
}
read more
It's a typo!
Technically this code will apply to an element with the following classes: "className" or "className".
But because one match is enough and they are the same name it doesn't matter.
Nope.
Maybe just typo. It has no meaning on css.
Related
How can I write this code more effectively? I don´t want to write .btn:hover every time.
.btn:hover .glyphicon-minus,
.btn:hover .glyphicon-ok,
.btn:hover .glyphicon-remove,
.btn:hover .glyphicon-trash,
.btn:hover .glyphicon-arrow-left,
.btn:hover .glyphicon-arrow-right,
.btn:hover .glyphicon-eye-open,
.btn:hover .glyphicon-floppy-disk,
.btn:hover .glyphicon-print
.btn:hover .glyphicon-pencil{
color: black !important;
}
Try:
.btn:hover [class^="glyphicon-"]
This targets all classes that start with glyphicon-
The carat symbol. It's most commonly used in regular expressions to designate the beginning of a string.
The 30 CSS Selectors You Must Memorize
.btn:hover [class*='glyphicon-'] {...}
... matches all elements children of .btn:hover that contain glyphicon- inside their class attribute. If they are always immediate children, you should use the direct descendant operator:
.btn:hover > [class*='glyphicon-'] {...}
... so it doesn't apply when .glyphicon-* is not immediate child of .btn.
Note: (#Paulie_D) In principle and for the general case, this is safer than using [class^="glyphicon-"], because when the matched children have more than one class and the one being matched is not the first, the selector won't match. For example:
<a class="btn"><i class="glyphicon glyphicon-floppy-disk"></i>Old devices</a>
Note: (#GeomanYabes, on the suggestion to use SASS). Using SASS (or not) usually has to do with the stack of the team/company you work in, with personal choice as a developer or with project/client requirements rather than with writing less code in a particular case in a particular project (like the one above). I mean you don't choose to use SASS if you have a case like the above and drop it if you don't. The decision is based on larger considerations and taken regardless. As a rule of thumb I tell everyone: if you write CSS, do use SASS. Getting back to your suggestion and the question, please note SASS produces CSS and that CSS is not necessarily more efficient, which is what OP seems to ask for, intentional or not.
In terms of efficiency, such as rendering speed and browser performance, I must say I'm really not sure which code is more efficient between the two (specifying each case or a pattern). I'm assuming a pattern should be a little heavier on the parser and the extra weight might not justify the characters saved by the shorter syntax.
In any case, the differences are so tiny they don't really matter in like 99,99% of cases. Regardless, if you decide to pursue this issue, I'm genuinely interested in any results/tests. Let's just say I choose to regard CSS more like a hobby than a job, which is the opposite of how I feel about JavaScript these days.
If efficiency is measured in characters typed, I guess the pattern wins. If it's measured in time spent to code, it varies from person to person and has more to do with knowledge than syntax.
You can use LESS or SASS for that. It allows you to nest classes/tags/IDs and other selectors inside each other. With that you could write
.btn:hover {
.glyphicon-minus,
.glyphicon-ok,
.glyphicon-remove,
.glyphicon-trash,
.glyphicon-arrow-left,
.glyphicon-arrow-right,
.glyphicon-eye-open,
.glyphicon-floppy-disk,
.glyphicon-print,
.glyphicon-pencil {
color: black !important;
}
}
The answers recommending CSS Regex will definitely solve your problem if you don't need to be selective about which glyphicons are being impacted.
In the event you need it to be specific though, unfortunately CSS' limitation stops there and you should consider looking into a preprocessor like Sass or a postprocessor like PostCSS to help with inefficient coding time.
.btn:hover {
.glyphicon {
&-minus,
&-ok,
&-remove,
&-trash,
&-arrow-left,
&-arrow-right,
&-eye-open,
&-floppy-disk,
&-print
&-pencil {
color: black !important;
}
}
}
Would give you the same output if you were using Sass.
try .btn:hover:matches(.glyphicon-minus, .glyphicon-ok, .glyphicon-remove, .glyphicon-trash, .glyphicon-arrow-left, .glyphicon-arrow-right, .glyphicon-eye-open, .glyphicon-floppy-disk, .glyphicon-print .glyphicon-pencil) {/*your css*/}
I am building websites for a while, and I have a question about CSS I can't really rid over. So there is that frequent situation when multiple classes affect a DOM element, and both classes declare the same properties. For example:
.first {
color:white;
}
.second {
color:black;
}
I know that if I have an element with class="first second" in that the text will be black. If I rather want it to be white, I have several options:
Using !important: I know this one is handy and I use it, but sometimes, if I use it too often, my CSS may become messy. I mean, multiple !important's can result the same basic situation.
Reordering the classes inline: if I am correct, which class comes first, it will be the priority one. This is nice, but i often work with environments where I can't affect that. Secondly, this is not a global but a local solution.
Reorder the CSS itself: well, this sounds interesting, but if I work with many stylesheets (and I do), it is hard to track, especially when it is WIP.
Actually what I am looking for is some workaround like z-index but for priorizing which class is stronger. Because I can't really find anything useful in this topic, I am just curious maybe it is a user error, and you guys know something I don't. How do you manage this? What do you suggest?
class="first second" is the same as class="second first". The priority is based on the position of the declarations in your css and not in their position on the html element.
So, if you want priority of a class against another, put the top priority class LAST on the css file.
.first {
color:white;
}
.second {
color:black;
}
in this example, class second has always priority over class first. This happens because browser scans through the css top-to-bottom and always applying the rules of matched classes that finds. So, the last matched class has priority over the previous matched classes.
see this fiddle: http://jsfiddle.net/5c29dzrr/
At the same specificity level, the CSS selector that is furthest down the stylesheet will be applied. So in your example, if you wanted in that situation to have the element with the white colour you would have to order your properties like so:
.second {
color: black;
}
.first {
color: white;
}
The order of the classes in the HTML tag is not important; it is the order in which they appear in your CSS.
The better way to handle this is to go with some better naming convention such as BEM or SMACSS so that you don't have the issue of conflicting class names.
Edit: It might be worth reading up on specificity and the cascade for a better understanding of this. I found this calculator to be pretty handy in determining which rules will take precendence, although these days you can just use the developer tools to find out that information.
I was wondering if its possible to "embed" pseudo-classes inside of each other. I have a hunch that you can't, but I just want to make sure I don't just have syntax wrong.
Here's an example of what I'm trying to do:
p.description { margin-bottom: 20px; }
Given that style, if you only want that to happen on matches that aren't the LAST p.description, is there anyway to do the following?
p.description:not(p.description:last-child)
Naturally, I'd have two styles, like so:
p.description { margin-bottom: 20px; }
p.description:last-child { margin-bottom: 0; }
...but that seems wasteful if it can be done in a single line.
Thanks a lot!
Yes, to the title of your question:
p.description:not(:last-child)
No, to the CSS example in the body of your question
p.description:not(p.description:last-child)
The spec says:
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
Yes, p.description:not(:last-child).
Yes you can, in webkit it works fine. I use this for example:
.middlenav:not(:nth-last-child(1))
Works great.
so p.description:not(:last-child).
should too
Sometimes I find myself creating a CSS class for a single element. So instead, I can use an ID and set a rule for this ID. Which way is preferable stylistically?
I'd say that this is more of a person-by-person preference.
For me, I try to think ahead: will I ever create two of these on one page? If the answer is even vaguely "yes," then I use classes. If I can't see the need for creating a second of the particular element, I'll use an ID.
In terms of the ID itself, I try to name it something that I won't conflict with. For instance, I'll choose something like:
#aboutus_team_wrapper {}
It's long and ugly, but I know exactly what it's for, where I'm using it, and I know I'll never create something that conflicts with the name.
Hope this helps!
Don't forget about selector specificity! I avoid using ID selectors whenever possible.
Reference: http://www.w3.org/TR/CSS2/cascade.html (6.4.3)
An ID selector is 10 times stronger than a class selector. That means you would have to use 11 class selectors to cancel an ID selector, or you would have to append the same ID selector to every CSS rule you write, or my favorite, use inline styles or !important rules!
"But why use a class style on an element that I know is only going to show up once? That's what ID selectors are for."
Because ID selectors screw up the cascade. Consider the following (un-semantic) code to illustrate this statement.
<style type="text/css">
#header a { /*Selector Weight: 101*/
font-weight: normal;
}
.bold { /*Selector Weight: 10*/
font-weight: bold;
}
</style>
<div id="header">
Happily not bold.
Sadly, not so bold.
</div>
SO bold...
To make this work, you'd have to add:
#header .bold { /*Selector Weight: 110*/
font-weight: bold;
}
Great, now we have two bold classes. You can see how quickly this can ruin you. Imagine trying to deal with this on a full featured web application.
No hard and fast rules on this one, it's as much about:
why you're using the style
what you're doing
where you're going
more than the number of elements that are involved.
If a style only refers to one, unique element, an ID based selector is the most appropriate.
If a style may refer to multiple elements, use a class.
The other thing to keep in mind is ID based selectors have higher priority than class based ones. This helps if any of your unique, ID'd elements inherit styles from more generic, classed based rules.
I prefer to use the ids for the most important elements that are repeated in the page, such as the Stackoverflow logo (and all the header) on this page.
Use a CSS class when the elements are not page-specific and can be repeated among different pages, or many times in the same page.
I want to remove all lines in a CSS file that contain the word "color".
This would include:
body {background-color:#000;}
div {color:#fff;}
How would you do that using the :%s/ command?
Should just be
:g/color/d
Is that such a wise idea? You could end up doing something you don't want if your CSS has sections like this
body {background-color: #000;
font-size: large;
}
p {
color: #fff; float: left;
}
You're better off removing only the properties containing color
s/\(\w\|-\)*color\w*\s*:.\{-}\(;\|$\)//
Update:
As too_much_php pointed out, the regex I didn't exactly work. I've fixed it, but it requires vim. It isn't feasible to forge a regex that only removes problem properties in vi. Because there are no character classes, you would have to do something like replacing the \w with \(a\|b\|c\|d\|....\Z\)
Standard ex sequence:
:/color/d
And just to give you a completely different answer:
:%!grep -v color
:)
This alludes to a larger bit of functionality; you can apply your knowledge of *nix commandline filters to editing your code. Want a list of enums sorted alphabetically? Visual select, :!sort and it's done.
You can use uniq, tac, etc, etc.
This did the trick for me:
:%s/.*color.*\n//