I'm just wondering if it is possible to assign a CSS class to the content added by an :after pseudoelement. Something like this:
span:after {
content: "after!"
class: red
}
I know you can specify several style attributes like font-size and so on, so I could imagine applying a class should be possible, too.
Acutally, I'm trying to append a glyphicon via bootstrap CSS this way. But a simple
span:after {
class: icon-wrench
}
didn't do it.
Pseudo-elements can't have classes. You can only apply individual style rules to them directly. There isn't a way to copy styles from a real element of a certain class to its pseudo-element either, unless you specifically select it, something like span.icon-wrench:after.
Related
If I define a css class, is there anyway to set that class as a default class for an html element? To clarify, I was hoping to factor out the definition of the class so it could be used by one or more css selectors or applied discreetly in the html.
For example:
.myclass {float:right}
h1 {class: myclass}
The above does not work of course, but hopefully you know what I am asking as I have not been able to find how to do this.
Not with standard CSS, but why not just do:
h1 {
float: right;
}
If I define a css class, is there anyway to set that class as a default class for an html element?
No. You can, however, select all elements and apply a rule to them:
* {
foo: bar;
}
You can do that if you are using a CSS processor like LESS (http://lesscss.org/#-mixins) or SASS (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins).
From your repeated comment “I was hoping to factor out the definition of the class so it could be used by one or more elements or applied discreetly”, it seems that what you are really up to is how to define a set of CSS declarations so that they apply to elements in a given class and and some elements independently of class. The way to do this is to use a list of selectors, e.g.
.myclass, h1 { float:right; /* and other declarations as needed */ }
This is the kind of “factoring out” that you can achieve in CSS. There is no way to “factor out” “CSS classes”, because there are no CSS classes. There are classes in HTML, and you can specify rules that apply to such classes.
Just write the following HTML
<h1 class="mylass"> .... </h1>
and write VALID CSS
i.e.
.myclass {float: right}
I'm not sure what you want to achieve, but maybe you ask this because you want to have multiple html elements use the same "class"?
If that's the case you can write it like this:
h1, h2, span{
background: red;
}
Is there a way to apply CSS styles to dynamically generated divs?
In this case, In Wordpress, I have a div class of .profiles and dynamically generated div ID's within that class of #profile-1, 2, 3 etc.
What I want to do, is apply the same styling to each profile-1, 2 etc div id's without having to specify the styling in each and every one within the stylesheet.
Is this possible?
Thanks!!
I may not be fully understanding the question, but couldn't you just create a style for the class .profiles in your css? If all of your divs use that class, then it should work just fine.
.profiles { (put your style here) }
You could do this in your css:
div[id^="profile-"] { your styles }
If the only childs inside <div class="profiles"> are your targeted divs, you can style them all this way:
.profiles div {
/*your style here*/
}
Another way to address this problem would be to add a class to all of your divs (and then style that class). In Wordpress, you can do that easily in the template files.
I am inserting an image into a div container with css like this:
.ft-folder-closed:before {
content: url('../ll-filetree/img/ft-plus.16.png');
}
I want apply some css attributes to that image without listing them in the together with the "content" attribute, but apply a nother style to it, to reduce CSS overhead. Something like this, but that of course does not work:
.ft-folder-closed:before {
content: url('../ll-filetree/img/ft-plus.16.png');
inherit: ft-floder-icon;
}
Any chance to do that?
You can group your CSS selectors to apply the same styles on multiple elements. This allows you to apply the same styles to multiple elements without repeating the styles.
Example:
.ft-folder-icon, .ft-folder-closed:before {
color: red;
}
This will apply the color: red; style to both the .ft-folder-icon elements and the .ft-folder-closed:before pseudo-elements.
If you decided to use a CSS pre-processor like LESS you could abstract your CSS using "mixins" similar to this:
.ft-folder-closed:before{
.ft-folder-icon;
}
Using "mixins" you can embed all of the properties of a class into another class just by including the class name as one of its properties. It's very similar to variables, but for entire classes.
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.
If I have a style class defined as such:
.myclass{
//bunch of other stuff
float:left;
}
and I define another class like this:
.myclass-right{
float:right;
}
and I define a div this way:
<div class="myclass myclass-right"></div>
Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).
As long as the selectors have the same specificity (in this case they do) and .myclass-right style block is defined after .myclass, yes.
Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.
Using !important is one way to do it.
.myclass-right{
float:right !important;
}
In addition if you are more specific with your selector it should override as well
div.myclass-right{
float:right;
}
Just wanted to throw out another option in addition to !important as well as style definition order: you can chain the two together as well:
.myclass.myclass-right{float:right;}
.myclass{float:left;}
As long as myclass-right is declared after your other class in your css file, it will work.
In case of a conflict, the css tag that comes after has a priority.
In other words - if you want some class to ever override others - just put it on end of your css file.
P.S. But don't forget that more specific rules has more priority, like .a.b {} is more powerful than just .a{}