This question already has answers here:
Anyone know what the purpose of tagging a class with *[class]
(2 answers)
Closed 7 years ago.
I see a lot of html emails and they have CSS like this:
*[class].w320
Now I think I understand CSS selectors, but to me the above does not really make sense because you are not really targeting anything. Isn't the above the same as simply doing this?
.w320
Any thoughts why they use the selector?
Actually using square brackets (attribute selectors) is a fix for yahoo mail.
I know you understand the selectors, but just a description of what they do:
This selects all elements with a class attribute and that also are members of the w320 class
*[class].w320
And this simply selects all elements with class of .w320
.w320
You can see Email Clients' CSS Support Here
Related
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 3 years ago.
So I have a CSS selector for a completely separate dialog in my application called "wizard-grid". This selector is nowhere in the HTML for this file, yet for some unknown reason the browser seems to be ignoring the parent selectors and inheriting from "select" for my dropdowns on this page. These files are minified, could that have something to do with it?
I even did a search in my entire project and the only place where the "wizard-grid" class is mentioned is in one CSS file and one HTML file that are not related to this page. I put a picture of what the broswer is interpreting below:
There are 3 separate selectors there, separated by comma. The "parent" selectors only apply to the input, not to the select or .search
.wizard-grid .wizard-body input
select
.search
I'm guessing what you probably want is this. You must have a mistake in your CSS somewhere.
.wizard-grid .wizard-body input
.wizard-grid .wizard-body select
.wizard-grid .wizard-body .search
This question already has an answer here:
Is it possible to use CSS vars in CSS3 selectors?
(1 answer)
Closed 7 years ago.
Keep in mind that this is not a duplicated question, to probe it go and read the http://www.w3.org/TR/css-variables/ if you read it says:
This version: http://www.w3.org/TR/2015/CR-css-variables-1-20151203/ If you read the date it says that is from 2015/12/03 so it's very recent, probably there is the confussion. The question that it says that was asked first does not work in the same way and was asked two years ago, e.g.(it uses a prefix -webkit- so it means that it wont work in all browsers that support the Native CSS Variables) The kind of variables i'm talking is something new, to understand why am i saying this, you need to read the articles of the links below, also my question cover another things that aren't answered in the question that was asked two years ago.
Also the second question below is updated now.
Maybe some people already know that there is a new implementation of variables for CSS, they bring a whole new way to write CSS code, at this moment the browser support is very low, but this have a great future.
I had read some information that explains more about CSS variables, so if you need info about it:
http://philipwalton.com/articles/why-im-excited-about-native-css-variables/
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
http://www.w3.org/TR/css-variables/
There are a few things that i still don't have clear:
Is there another method to change the values of a variable, that not be the media queries? e.g. using :hover or javascript?
Can i use variables to define Selectors?
Is there another method to change the values of a variable, that not
be the media queries and selectors?
I assume you mean changing the value of a CSS variable outside of a rule set.
Yes, you can. You can assign a CSS variable through the style property and the setProperty or setPropertyValue methods.
document.body.style.setProperty('--bg', 'red');
body {
background: var(--bg);
}
Can i use variables to define Selectors?
No. It wouldn't make sense to do so: from which element should it retrieve the value of the variable? Using variable values in properties could make more sense, but you can't neither.
To retrieve the value of a CSS variable you can only use var(), which can only be used in values.
The value of a custom property can be substituted into the value of another property with the var() function.
This question already has answers here:
Using custom HTML Tags
(10 answers)
Closed 9 years ago.
I've learnt HTML and the basics of CSS only recently and am enjoying the liberty of finally being web literate. One thing puzzles me, with the usefulness (literally and semantically) of elements in HTML5 such as
<footer>
etc why dont we just create and define our own elements such as
<price>
or
<icon>
instead of giving standard ones classes or defining divs all the time which seems confusing in comparison? It seems CSS has no problem styling these (in my tests anyway) like anything else providing I state whether display is inline or block etc.
Is this a totally standard thing to do I have just stupidly realised or am I missing a major downfall with this here?
Because:
Semantics only do any good if the user agent (browser, search engine, etc) understands them
If you make up your own elements and a set of semantics, then someone else (including the W3C) may introduce their own element with the same name but with different semantics and user agents would interpret your element "incorrectly".
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Tool to identify unused css definitions
I have quite big CSS file, that already contains style definition for classes/elements that are not used by markup any more.
It is possible to find those quick?
You can use the Firefox extension Dust-Me at http://www.sitepoint.com/dustmeselectors/.
you can get the Dust-Me Selectors plug in for Firefox to test pages individually or spider a whole site.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Complex CSS selector for parent of active child
How would I make a css selector with that applies style to a table cell that has an input child element?
Unfortunately, you can't target parent elements in CSS yet (I believe it will come in CSS3)(see Sam's answer). If you want to do this, you'll either have to a) use javascript or b) add a class name to the td containing the input.
Here is a nice reference of the selectors you can use currently to target children, siblings, types, etc.
According to Wikipedia:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.
And for anyone searching SO in future, this might also be referred to as an ancestor selector.
If you're using jQuery:
$("td input").each(function() { $(this).parent("td").css("style", "value"); });