I'm currently getting headaches from this darn pseudo-element called :first-letter. It seems to be so helpful, but ultimately does not work the way I expected.
Here's an example on jsfiddle, how I tried and how it should look like:
FIDDLE is here
As you can see, :first-letter does nothing. I expected it to overwrite the normal link settings and also the :hover selector.
What could've possibly gone wrong? Any other idea how to achieve this only with CSS?
Instead of putting your "»" in the HTML you could put it in the CSS
http://jsfiddle.net/4DnKu/4/
a.one:before {
content: "»";
color:#0F0;
padding:0 5px 0 0;
}
IMHO it shouldn't be in the HTML either way, as it actually is only decoration.
Pseudo elements are supported by all major browsers, only one you'll have problems with is IE<8. There you could use CSS expressions as a workaround (handle with care!):
a.one {
*zoom: expression( (new Function('elem', '\
if(elem.before)\
return;\
elem.innerHTML = "<span class=ie7-before>»</span>" + elem.innerHTML;\
elem.before = true;\
elem.style.zoom = "1";\
'))(this) );
}
a.one > .ie7-before,
a.one:before {
content: "»";
color:#0F0;
padding:0 5px 0 0;
}
This uses quite a few hacks, so I would not recommend using it unless you understand what is going on there.
Related
It sounds like this is something that sass/less/mixins/jquery are required for right now.
What I'm looking to do is something like this:
.myClass {
color: blue;
}
h1 {
class: myClass;
}
I'm curious why this was not done already, given that CSS seems to be about inheritance/aggregation if nothing else.
Does it not make sense for some reason?
Or maybe it's just too complex?
Thanks!
...I don't know if this is the first '#extend' proposal, but it comes out because of its popularity in sass, apparently: http://tabatkins.github.io/specs/css-extend-rule/
and there is an early discussion of the proposal in this list thread: https://lists.w3.org/Archives/Public/public-houdini/2015Jan/0005.html
Not sure if it is going to be a future CSS standard. But you can already do it with SASS and SCSS. Here is SCSS syntax:
.myClass {
color: blue;
}
h1 {
#extend .myClass;
...
}
Documentation: https://sass-lang.com/documentation/at-rules/extend
Well, in effect what you are trying to do is to make your CSS properties defined in the .myClass block, apply in your h1 block, (correct me if I'm wrong).
If that's what you meant, you can already do that by simply adding myClass to your h1 tag like <h1 class="myClass">Header</h1> and in your CSS you would do this:
.myClass {
color: blue;
}
// or
h1.myClass {
color: blue; // To only target h1 that have the 'myClass' class
}
Will future CSS standard allow applying classes to elements in a style declaration?
Well as you can see we can already do that with HTML, so I doubt it.
I'm looking to see if anyone has ever had any experience with this CSS syntax debate we are currently having on our team. Our dev team has been using the vim plugin Tabular to align text in our code. For example in PHP or Javascript we will align variable declarations using the plugin like this:
$count = 0;
$var_1 = array();
$var_2_long_name = array();
$stdout = fopen( 'php://stdout', 'w' );
$some_data = json_decode( $some_json_data, true );
Helps the code look clean and easy to read.
We have considered using alignment in our CSS (we are using LESS but this question could be applied to SASS or just straight CSS). For example we would change this block:
.btn-section {
position: relative;
top: -65px;
display: block;
z-index: 100;
.content-box;
background-color: #grayButton;
color: #gray;
padding: 10px 0;
.border-radius(5px);
}
To this:
.btn-section {
position : relative;
top : -65px;
display : block;
z-index : 100;
background-color : #grayButton;
color : #gray;
padding : 10px 0;
.content-box;
.border-radius(5px);
}
One of the devs experimenting with this tactic moved the mixins from their original spots to the bottom of the declaration in order to make the code "look right" since mixins don't conform the the normal selector: value; format of regular css. In this case, the .content-box mixin had a background-color declaration that was being overridden by the backgroud-color line beneath it. Moving the mixin to the bottom broke the override and gave the element the wrong background color.
Errors like this coupled with the extra steps it takes to format every single block of CSS make me think this might not be such a good idea. Has anyone ever tried this type of alignment before? Any opinions on whether this is a good or bad idea? Thanks.
I think your alignment tactic is a good idea, I'd just recommend turning it upside down:
.btn-section {
.content-box;
.border-radius(5px);
position : relative;
top : -65px;
display : block;
z-index : 100;
background-color : #grayButton;
color : #gray;
padding : 10px 0;
}
That way the more general mixin styles would be applied first, after which they may be overridden by selection specific adjustments instead of the other way around.
By doing it like this, you eliminate this risk of accidently overriding specific styles with inherited ones and still keep everything neat and easy to read.
HTML
<div data-whatever='something cols-16 else'>
</div>
This works:
Will work - CSS
[data-whatever*='cols-1'] {
background: red;
}
It will find the div and make it red.
Will not work - CSS
[data-whatever='cols-16'] {
background: red;
}
It will not find the div because there are other stuff in there as well.
Problem
The problem with the working CSS, is that it matches both cols-16, cols-1 and any other that starts with cols-1.
Question
Is it possible to find an attribute value, exact match?
In order to target the class cols-16 (even when it appears with other classes)
and not target the cols-1 class use this:
[data-whatever~='cols-16'] {
background: green;
}
You can see this working in this fiddle.
For more info see this post (Goto #16. - X[foo~="bar"]
The tilda (~) symbol allows us to target an attribute which has a
spaced-separated list of values.
try this:
[data-whatever~='cols-1'] {
background: red;
}
It worked for me if I didn't missunderstand your question
Edit: I just remembered the ~= randomly, tried it, and pasted it.
But I just googled a bit (I had curiosity and found This, it's quite interesting)
To ensure that it only matches cols-1 and not cols-16 without relying on the cols-16 style overriding the cols-1 style (below), you could:
[data-whatever='cols-1'],
[data-whatever^='cols-1 '],
[data-whatever*='cols-1 '],
[data-whatever$='cols-1'] {
background: red;
}
This matches data-whatever="cols-1", data-whatever="... cols-1", data-whatever="cols-1 ..." or data-whatever="... cols-1 ...".
JSFiddle example.
Thanks to aleation's answer: data-whatever~="cols-1" achieves the same as the above in just one selector.
--
At any rate your cols-16 styling could overwrite your cols-1 styling anyway, depending on the order it was presented:
[data-whatever*='cols-1'] {
background: red;
}
[data-whatever*='cols-16'] {
background: blue;
}
/* cols-1 will be red. cols-16 will be blue */
JSFiddle example.
I am building a widget that will be displayed on a client's site. We cannot use an iFrame so I am forced to use an exhaustive CSS reset (https://github.com/premasagar/cleanslate) to avoid interference with their styles. To use that solution, I need to add !important to all of my styles and because there are a lot of them and I want to keep this code easy to maintain, I'm looking for a more dynamic solution.
I am able to add !important to the stylesheet via javascript but that's not ideal for a production environment. I am using CodeKit and LESS and wondering if either of these are able to help me easily add !important to all styles when the CSS file is generated.
Mixin?
CodeKit config?
Update: Yes, LESS Can Help
I hate using !important except in the most extreme circumstances. Most people use it like a chainsaw when they should be using a scalpal to do the job. Nevertheless, I understand the issues facing widget developers like yourself, and your choice to use https://github.com/premasagar/cleanslate leaves you with no option.
Marc's answer noted a good feature of LESS, but he failed to demonstrate how that can help in this matter.
If you wrap your entire LESS code in a namespaced mixin, then this feature does exactly what is needed. So assume your widget code looked like this (you mentioned you are already using some type of class for your widget):
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
Then you can do this (wrapping all your widget code in #makeImportant() then calling that mixin with the !important feature noted in Marc's answer):
#makeImportant() {
.yourWidgetClass div > p {
prop: something;
&:hover {
prop: some-hover-style;
}
}
.yourWidgetClass .someClass {
prop: something;
}
}
& {
#makeImportant() !important;
}
This produces the following CSS Output:
.yourWidgetClass div > p {
prop: something !important;
}
.yourWidgetClass div > p:hover {
prop: some-hover-style !important;
}
.yourWidgetClass .someClass {
prop: something !important;
}
For my original (accepted) answer that was way more manually intensive, see the edit history.
I found that LESS can mark all properties set by a mixin at once as !important when specify !important after the mix-in call.
.someMixin() {
background-color: #fff;
cursor: pointer;
}
.someUsages {
.someMixin() !important;
}
Results in:
.someUsages {
background-color: #fff !important;
cursor: pointer !important;
}
For more information on this topic see the LESS doc about "The !important keyword".
Is it possible to add additional rules to a css block when using a "{ (properties of x) }" selector?
I looked at references but I can't find anything related to "properties of x". A link would be wonderful. I tried the following two combinations, but neither worked:
.dock li { (properties of grid_2; display:inline; background-color:#666; ) }
.dock li { display:inline; background-color:#666; (properties of grid_2) }
Many thanks!
EDIT
Apparently I misread an article and thought that such a syntax existed. I thought one could create a class and let it inherit the properties of another using such syntax, which is evidently not the case.
CSS does not have such a feature.
What you are describing is not possible. I think there are two other possibilities you could maybe use. The first is, that you need to know that several styles can be applied to an element at the same time. I'll give you an example:
li { font-size: 10pt; }
.dock li { color: #ff0000; }
All list items will be formatted with a font size of 10 points and only those within an element containing the dock class will be red.
My second suggestion is that you try applying two or more classes to your HTML element, for instance:
.grid li { font-size: 10pt; }
.dock li { color: #ff0000; }
Now put the grid and dock class into your HTML, and the elements will apply both style definitions:
<ul class="grid dock"> ...
Whatever you consider best for your project: remember that the properties defined in the second style overwrite the properties of the first one (if they do not define the same properties at all, there will be no confusion).
maybe your question is not too strange..
What I understand is that you want to do something like:
.a { prop1: val; prop2: val; }
.b { prop3: val; prop4: val; }
.c { .a; .b; prop5: val; prop6: val; }
You want the class .c to inherit all the properties and values of .a and .b
If this is ok, you can do that using LESS.
To use your LESS code in your sites you have different ways to do it.
First of all check the original site: LESS.org
If you are on Mac check this site: LESS APP + PLUGINS
If you are on PC the less.js plugin should be easier to implement LESS in your sites: less.js usage
Hope it helps.
Happy coding y'all! :)