I was wondering if there was anyway to make this CSS more compact and generic
#av:target, #bis:target, #ena:target, #esc:target, #kis:target, #kso:target... {
background:red;
}
basically I have many of these styles and without code would like if i could just have one entry for all since they all do the same thing.
As ids must be unique, your solutions are two: classnames or attributes. Examples:
With class
<!-- HTML: -->
<element class="target">
<!-- CSS: -->
.target:target {
/* your styles **/
}
With attribute
<!-- HTML: -->
<element data-target=""> <!-- Can be empty or filled, but the important is the attribute -->
<!-- CSS: -->
[data-target]:target {
/* your styles **/
}
By this mode, you have one rule in your CSS that you can apply to all elements that you need. Choose the one that best fits with your requirements.
Related
I have a common element which contains articles, and want to treat all but the first child differently as follows:
.listing{
article{
// Some styles
}
article:not(:first-child){
// Some more styles
}
}
All well and good. However on some listings they should all be treated the same, so I don't want to include the article:not(:first-child) selector, it needs to be like the following:
.listing.alt{
article{
// Some styles
// Some more styles
}
}
How can I combine these two rules without repeating everything?
Ok I think I've figured it out using Sass:
.listing{
article{
// Generic Styles
}
&.alt article,
&:not(.alt) article:not(:first-child){
// More Styles
}
}
I also see that my original code example was a bit weird so I've updated it so it's a bit more correct.
HTML
<div class="listing">
<article>1</article>
<article>2</article>
<article>3</article>
</div>
<div class="listing alt">
<article>1</article>
<article>2</article>
<article>3</article>
</div>
CSS
.listing:not(.alt) article:not(:first-child) {color:gainsboro;}
Updated demo
I have two css classes
.circle-btn{
}
.circle-btn-medium{
}
Hhowever both classes having their own properties. But at hover property I want to use same background color for both.
One solution i found is what to use hover property seperatly as follows
.circle-btn:hover
{
background-color:#39C11E;
}
.circle-btn-medium:hover
{
background-color:#39C11E;
}
So instead of using hover property separately is it possible to use this property with different classes at same time so I can optimize my coding?
You can minimize it by joining the 2 class in to one ..
.circle-btn:hover ,
.circle-btn-medium:hover {
background-color: #39c11E;
}
You can use one or two classes in your html. So -medium will be modifier, which responce only for size.
For example:
css:
.circle-btn{
}
.circle-btn-medium{
}
.circle-btn:hover
{
background-color:#39C11E;
}
html:
<!-- common circle-btn -->
<button class="circle-btn">circle button</button>
<!-- medium circle-btn -->
<button class="circle-btn circle-btn-medium">circle medium button</button>
By the way, this is bootstrap way. Just look, for example, to their buttons sizes modifiers.
I have a slider that's marked up like so:
<div class="slider wide">
//slider html in here
</div>
And another marked up like so:
<div class="slider narrow">
//slider html in here
</div>
Is it possible to reference each of these like this in my CSS file by in a way concatenating the class names:
.slider.wide { //css specific to the wide slider goes here }
.slider.narrow { //css specific to the wide slider goes here }
No, you make three classes .slider, where you put common slider css, and .narrow where you put narrow slider specific css, and .wide where you put wide slider specific css.
.slider { //css common among all sliders goes here }
.wide { //css specific to the wide slider goes here }
.narrow { //css specific to the narrow slider goes here }
Yes, .slider.narrow is valid. It's not exactly concatenating the class names, it's making two different class selectors and applying them to the same element. So .narrow.slider is also valid and will match the same elements.
The problem with using multiple class selectors against a single element is that is doesn't work in IE6. This browser will ignore all but the last class selector. So to support that browser you typically end up using something like class="slider wide-slider".
I need to select all span tag elements within a div with an id list_{[0-9]}+ having the following form:
<div id="list_1234" ...>
<!-- can be nested multiple levels deep -->
...
<span class="list_span">Hello</span>
</div>
How can I do that, e.g. without using jQuery? Is that possible?
If you're happy with css3 selectors you could do something like
div[id^="list_"]
But this will also target divs with ids like list_foo.
You can do this with pure CSS pretty easily, just give those divs a class like this:
<div id="list_1234" class="container" ...>
And CSS like this:
.container span { /* styles */ }
Why you do'nt use a common class ? You can add many class
class="list_1234 mydiv"
And your selector :
.mydiv span
The only thing you can do is:
list_1 span, list_2 span, list_3 span... { ... }
Is it possible to add a "class" attribute to these divs? That's the proper way to handle multiple elements with ids.
I use the following code on my page:
<div id="itemstable" class="item_type1">
...other divs here...
</div>
And in my CSS file I have this code:
.item_type1 div {
background-image: url(images/type1.giff);
}
the problem is there are a lot of different item types so I will need to have a lot of lines in my CSS file. I was wondering how to apply the background-image: url(images/type1.giff); style to the nested divs without assigning it to each one. eg. I want to change the code for the "itemstable" div so that it applies a css rule to the nested divs.
Is this possible?
EDIT: I'm looking for something like this:
<div id="itemstable" style="SET BACKGROUND IMG FOR NESTED DIVS HERE">
...other divs here...
</div>
(If I'm understanding the question correctly:)
Think about using a different ID/class scheme. I don't know about the further specifics of your structure, but id="itemstable" class="item_type1" seems slightly redundant to me. Can itemstable be anything else than item_type1? Try to apply more generic class names and keep the specific cases for IDs.
Failing that, you can add another class that is responsible for adding the background image: class="item_type1 item_types".
EDIT
Since it seems sheer mass is the main problem (not applying the style as the title suggests) it's probably best to dynamically insert a style in the page header. Something along the lines of:
<head>
...
<style type="text/css" media="screen">
<?php echo "#$myelement"; ?> div { background: url(<?php echo $image; ?>) ...; }
</style>
</head>
Inline styles can only apply to the element directly, not one of its children. I.e.:
<div style="background: ...;">
The background only applies to this one div.
You can't use selectors in inline styles like:
<div style="div { background: ...; }">
I think including a little more of your HTML would make your question easier to understand.
You can certainly include multiple rules in a compound selector:
.item_type1 div.a, .item_type1 div.b, .item_type1 div.c {
background-image: url(xyz.gif);
}
But since you are pulling images from the database dynamically, you will need to either include them in your dynamic code-- in the divs themselves, or dynamically create CSS as suggested above:
<style>
<% for $i in $images { echo "div.image$i div { background-image: url(/path/to/$i) }" %>
</style>