If for example, I have a lot of CSS styles that only have to apply to objects within a div #container. Is it possible to instead of write #container in front of all, have another type of selector? So I don't have to write it for EVERY object within the div #container?
HTML
<div id="container">
<div class="letter">a</div>
<div class="letter">b</div>
<div class="number">1</div>
<div class="number">2</div>
</div>
<div class="letter">c</div>
<div class="number">3</div>
CSS
.letter {
font-size:25px;
color:green;
}
.number {
font-size:30px;
color:red;
}
I want to write a rule for every .letter and .number within #container.
Ofcourse I'm only reproducing my issue here, but is there a possibility to change the rules of .letter and .number so it applies only to #container without having to change it 2 times (2 times in this reproduction)? (In my issue it's about 30 objects).
I tried a #container selector before those rules, but without succes. It breaks the styles.
My CSS attempt:
#container {
.letter {
font-size:25px;
color:green;
}
.number {
font-size:30px;
color:red;
}
}
Does anyone know a solution or do I have to manually apply #container in front of every rule like this (which I want to avoid cause it's a lot of work!):
#container .letter {
font-size:25px;
color:green;
}
#container .number {
font-size:30px;
color:red;
}
YES, CSS is quite stupid and simple, you have no other choose than having #container in front of each class.
BUT
Developers are lazy and created a pre-processing language to add some crazy functionality. Currently, two alternatives : SASS and LESS
But using those technology you can write your styles like this :
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
and then automatically generate a CSS file like that :
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
This is called "Nesting" and is only one of the many stuff you will love.
Which one to use between SASS and LESS ?
They are similar, my recommandation is us an existing framework and look which one is available. For exemple bootstrap use LESS and Foundation use SASS ... but both are quite similar.
I use both daily, and have some preference to SASS, but that my own opinion.
In pure CSS, I can't think of a better way of doing it than what you're already doing - which is a lot of repetitive work as you've pointed out.
Your first "CSS attempt" is the correct approach, but you will have to use SASS or LESS if you want to be able to nest selectors like that. Pure CSS doesn't support it.
I strongly recommand that you look into SASS/LESS, they offer much more than just nested selectors and they will make your CSS coding a lot more enjoyable overall.
CSS is, by design, a very simple language. There is no way (yet) to achieve what you want with pure CSS.
CSS preprocessors such as LESS and SASS have stepped in to help alleviate the tedium of this and other common problems with traditional CSS (such as variables). Your nested example is exactly right in SASS. These all compile to plain old CSS, but will necessitate a change to your front-end build process.
If you can't make use of a preprocessor, find + replace is your friend.
The answer is No.
You can't do that without using a preprocessor like less or sass.
Take a look at SASS for example http://sass-lang.com/guide in the "Nesting" section you can see that's exactly the feature your're looking for.
If you want to try it follow the instructions should be pretty simple.
The same feature is present in the less preprocessor but my opinion is that SASS is much more powerful and flexible so if you have to start from sketch go for this one.
If you can't go for a preprocessor then preceding every selector with #container is the only way you have.
Related
How to make :hover work in less?
I need to change a button bg-color on hover and I wrote the following code:
.actions-toolbar {
.primary {
display: inline-block;
button{
text-transform: uppercase;
&:hover {
background-color: #df2423;
}
}
}
}
Unfortunately it doesn't work
Look at the resulting CSS and if that makes sense compared to your HTML structure.
Resulting CSS for your Hover-Style will look like this:
.actions-toolbar .primary button:hover { background-color: #df2423; }
One thing I always recommend when writing LESS or Sass or equivalent preprocessor languages: (very) careful with the nesting, it can cause irritiation and problems (very) often!
I am trying to write CSS that only applies to certain Divs. I have code that works for this example, but I would like to do it in a way that doesn't require me to put .landing in front of every line
HTML
<div class="landing">
<h1>Hey</h1>
<p>Hi</p>
</div>
<div class="notlanding">
<h1>Hey</h1>
<p>Hi</p>
</div>
CSS
.landing h1{
color: red;
}
.landing p {
color: blue;
}
This produces what I want to accomplish, but is there a way to wrap both h1 and p in .landing?
Something like this
.landing {
h1{
color: red;
}
p {
color: blue;
}
}
No this way you can not use in CSS.
But you can use SASS - Syntactically Awesome StyleSheet
http://sass-lang.com/
SASS allows you to write dynamic css like variable declaration and much more. Just check above link.
You could do that if we'd be using a css compiler like less or sass... I think you can't do it in pure css.
Another way to achieve this is using Shadow DOM (not widely supported yet). Then, your landing div cound be a shadow root and could have its own stylesheet... this basically works in Angular 2 today.
Suppose you have this HTML:
<div class='foo-element-1'></div>
<div class='foo-element-2'></div>
...
<div class='foo-element-500'></div>
CSS:
[class^='foo-'] { font-size: 12px; }
.foo-element-1 { color: red; }
.foo-element-2 { color: blue; }
...
.foo-element-500 { color: green; }
Every .foo-element-### shares a common style in [class^='foo-']
Another way to write this might be:
HTML:
<div class='foo foo-element-1'></div>
<div class='foo foo-element-2'></div>
...
<div class='foo foo-element-500'></div>
CSS:
.foo { font-size: 12px; }
.foo-element-1 { color: red; }
.foo-element-2 { color: blue; }
...
.foo-element-500 { color: green; }
Nothing else uses .foo. All .foo-element-### will have .foo attached to it in this option. Assume that browser compatibility is a non-factor and there are several hundred of these elements that all have a common style.
Is there a reason in terms of performance or semantics to use one style over the other?
Selection by classes is a good deal faster: http://jsperf.com/class-vs-data-attribute-selector-performance
Also, it just plain makes sense to have elements that share common style to share a common class. And if the elements style must deviate from the shared style, a second class on the element also just makes good sense.
Which means class selectors are both faster and more maintainable. There's not much downside here, other slightly more verbose markup. But assuming you are generating these items in a loop in some templating language, you would only need to write that extra class value once and the loop would duplicate it.
So yeah, use the class selector. It's pretty sweet.
I could do something like:
#id1 .class1, #id2 .class1{
color:#FFF;
}
But that seem's bulky, especially if I have a ton of ID's I want to share with 1 class.
I'd much rather do something like:
#id1, #id2 .class1{
color:#FFF;
}
Obviously this doesn't work, but you get my drift.
Thoughts?
EDIT:
Probably should have mentioned I am over-riding CSS framework before I got flamed. Think bootstrap or zurb foundation. That's why there is a need to do this instead of just using a class. I was just wondering if there was any other inheritance selectors I wasn't aware of in native CSS.
You can use a language like LESS which compiles to CSS. Just one of it's many features is that the following LESS:
#id1, #id2 {
.class1 {
color: #fff;
}
}
Compiles to:
#id1 .class1,
#id2 .class1 {
color: #fff;
}
That compilation can be done server-side (lessphp or less.js) or client-side (less.js) depending on your preference/needs.
What about this?
.class1
{
color:#FFF;
}
You're overthinking it. The point of classes is to cover multiple items. all you need to say is:
.class1{
color:#FFF;
}
this only won't work directly in 2 cases.
you have the class appearing elsewhere. Find (or create) a unique element surrounding your classes, such as
ul .class1{
color:#FFF;
}
you have the class showing up on other types of elements. In this case:
li.class1{
color:#FFF;
}
I suggest doing some reading about CSS specificity.
http://css-tricks.com/specifics-on-css-specificity/
First try writing a specific enough selector that will override the CSS framework.
This may involve doing something like
html body .class-i-want-to-override { /* ... */ }
It may require putting an !important on there, although that should be your last resort.
.my-class { color: pink !important; }
Finally I would suggest looking into a CSS preprocessor like SASS. This would allow you to write in a more efficient manner.
#special1,
#special2,
#special3 {
.override {
color: pink;
}
}
Which would get compiled to:
#special1 .override, #special2 .override, #special3 .override {
color: pink;
}
Why not just use a class?
Or apply, in the elements with these ID's, a common class? As a element can have a ID and classes at the same time..
In the code below is a basic example:
#commonClass .class1{
color:#FFF;
}
In one of my recent projects, I noticed that certain styles occur in the same combination repeatedly. According to the DRY principle, I should combine these styles. Regarding a good CSS style, what option is better/the best?
Option 1
Creating a class that contains these styles and simply add it in the HTML to the according elements.
Example
In the HTML:
Link
or
<ul class="myClass">
<li>Item</li>
<ul>
In the CSS:
.myClass {
font-weight: bold;
font-size: 14px;
color: grey;
}
Option 2
Simply combining all elements that need that style in my CSS, like in the following example.
a,
ul {
font-weight: bold;
font-size: 14px;
color: grey;
}
.myClass {
font-weight: bold;
font-size: 14px;
color: grey;
}
is best ...
.myclass {
font-weight: bold;
font-size: 14px;
color: grey;
}
is even better (lower-case)
This way, the DOM engine will get to the element without having to stack across all a and all ul tags in your document.
I often encounter the same problem and have learned to go for Option 2.
First, you need to ask yourself why both styles are connected: are the two elements you're styling meant to always be styled the same way or is is just a coincidence that they're styled the same?
For example, if you decide that your links shouldn't be grey anymore, but blue, will you be ok to have your ul list be blue as well? What I mean is: are the links and the list related? Do they have to look always the same? Or it just happens, in this particular situation, that they're the same?
Also, you need to beware of the name of your class.
If you call it something like .boldGrey, you're doing it wrong because your class name is desribing the style, not the content.
If you call it something like .secondary, you're doing it well, because you're describing the content, not the style. In that case, using Option 1 can be ok.
But in the end, I always go for Option 2. Although you connect the same style to multiple elements, it's still easy to modify it afterwards, if you change your mind. I usually put at the top of my CSS (just below the reset) a list of elements that share the same properties. Then, I add specific styles for each element.
Example from my website:
time, code, figcaption {
background:#f5f5f5;
border:1px solid #e9e9e9;
border-radius:2px;
color:#93a1a1;
font-size:11px;
padding:0 4px 1px;
white-space:nowrap;
}
Then, below, I have for example some additional styling for code:
code {
font-size:12px;
position:relative;
top:-2px;
}
While I was styling these 3 elements, I noticed that I wanted them to look the same. But not exactly the same. So I regrouped everything they had in common, and then specified what they had in particular.
Could I have used a single class for that? Maybe. But how would I have called it? .greySmallBordered? .littleBlocks? .tagLooking? It's really hard to come up with a name that only describes the content and not the styling.
So I usually list multiple elements in my selector because:
it's the best way to keep the content in the HTML seperated from the styling in the CSS
it helps specifying additional styling for each element