I have the following HTML:
wide button
narrow button
I've tried using an attribute selector and combining it with the button class but it doesn't work as expected.
.button.[class*="large-"] {
font-size: 0.9em;
}
Am I using this correctly and if not, how?
You don't need the second period, unlike JavaScript the [class*="large-"] isn't compiled to return the found-string, it's simply evaluated as-is:
.button[class*="large-"] {
font-size: 0.9em;
}
JS Fiddle demo.
You are using attribute selector using [class*="large-"] and so you don't need to use period(.) ie class selector here. Just simply write this
.button[class*="large-"] {
font-size: 0.9em;
color:red;
}
JS Fiddle Demo
.button[class*="large-"] {
font-size: 0.9em;
}
wide button
narrow button
narrow button
narrow button
this seems to work
Try this:
a.button[class*=large] {
font-size: 0.9em;
}
Related
I have a .tintTile that depends on parent, hence the & sas follows:
// Tint titles
.tintTitle {
text-transform: uppercase;
font-family: #fontDemiBold;
color: #colorOrangeKWS;
.Windows7 & {
font-family: arial, sans-serif;
font-weight: bold;
color: #colorOrangeKWS;
}
}
In many others classes, I use the .tintTitle as follows:
// titles, orange bold
.tab {
&>div {
.tintTitle;
// etc.
}
}
Unfortunately, I can't achieve the .Windows7 (provided the fact Windows7 is a class set to the body tag as follows:
<body class="Windows7">
<p class="tintTitle">Good, it works</p>
<div class="tab">
<div>This title doesn't make it</div>
Is there a way to achieve my goal with less beside duplicating every .tintTitle where it's required?
As far as i understand your question your code should work in Less, see http://codepen.io/anon/pen/KwNWmq
Less code:
// Tint titles
.tintTitle {
text-transform: uppercase;
color: green;
.Windows7 & {
text-transform: initial;
color: red;
}
}
.tab {
&>div {
.tintTitle;
// etc.
}
}
Your are using the parent selectors feature of Less to change the selector order
The only thing you should notice will be that properties set for your (not having .windows) will be also applied for your .windows selectors. That's why i have to set text-transform: initial;, otherwise the .windows * also get uppercased cause the also match .tintTitle.
In CSS, is there a way to use a class as a property? As in the first line below:
h1 { class = big }
.big { font-size: 25px; }
.small { font-size: 10px; }
The goal being to easily change the h1 styling by replacing "big" with "small" in the first line of code.
You can use less, sass, stylus or something similar.
With those you can easily do that.
No is posible H1 => references an html tag
I need to give particular style in css just for Firefox in ExtJs 4.2
Looking in the web I found that Extjs give a particular class when you are in certain browser so I tried:
.x-body.x-gecko .x-btn-action-nav-large.x-btn-inner {
font-size: 5em;
}
or even
.x-body.x-gecko {
.x-btn-action-nav-large.x-btn-inner {
font-size: 5em;
}
}
But nothing work and is showed in Firefox
any suggestion?
Try:
.x-body.x-gecko .x-btn-action-nav-large .x-btn-inner {
font-size: 5em;
}
You need a space between the last 2 rules as the inner element is a child of the button.
You could also simply do:
.x-gecko .x-btn-action-nav-large .x-btn-inner {
font-size: 5em;
}
I'm trying to update a website. There's a label element I want to style. It looks like:
#foo {
font-size: 9px;
}
<label id="foo"></label>
but it looks like a css definition for the "label" element is overriding the more specific style I'm setting. I'm seeing this in firebug
label {
font-size: 16px;
}
.foo {
font-size: 9px; /* strikethrough on my font-size declaration here */
}
so is there a way to override the default label font-size setting without modifying it for everything? (I thought my more specific definition would do that by default)
Thanks
You've mixed up the syntax for id with the one for class:
#foo { /* # = id, . = class */
font-size: 9px;
}
Keep in mind that ids are supposed to be unique for the entire document
or switch your label to using a class instead:
<label class="foo"></label>
You could always use the !important indicator to give precedence to the rule.
font-size: 9px !important;
I thought that it was possible, but everyone tells me it's not.
I want context styling in my css file like:
div#foo {
h2 {
color: #F42
}
p.bar {
font-size: 12px
}
}
So that only h2 and p.bar in the div with id foo will be styled. Or is this only possible with LESS and other similar libs?
Thanks & kind regards,
Jurik
This is not possible with standard css, the 2 classes would need to be set like:
div#foo h2 {}
div#foo p.bar {}
This is not possible with pure CSS, that's why you should use SCSS or LESS (i suggest to use SASS/SCSS), which are CSS supersets
LESS/SASS-SCSS allows you to write dynamic CSS with ease, take a look at this comparision
check out COMPASS which is the main reason why I suggest you SASS/SCSS
It's possible, but as follows:
div#foo h2 {
/* styles go here */
}
div#foo p.bar {
/* styles go here */
}
What you have above is just a slightly altered version of:
div#foo h2 { color: #F42; }
div#foo p.bar { font-size: 12px }
I don't really see any gain to it.
Less let's you do pretty much what you described, as well as some other cool stuff like use variables in css etc.
Of course, once you let it compile, it'll just turn it into the valid CSS that has been suggested in the previous answers. Still worth a look IMHO.
yes but separated...
div#foo h2 {
color: #F42
}
div#foo p.bar {
font-size: 12px
}
but I would like too change a bit:
#foo h2 {
color: #F42
}
#foo p.bar {
font-size: 12px
}
you are using an ID so you don't need to say nothing before because ID's are unique
Its not possible using default CSS techniques.
But, by using sass and less however, it is possible.
The code in your question, works in both of the libraries above.