I wonder why element[class="name"] seems to used primarily in responsive emails instead of the usual .class?
Also, unless I'm missing something, if an element has multiple classes for eg.
<span class="class1 class2"></span> then neither of these appear to work:
element[class="class1"] { }
element[class="class2"] { }
.. why is that?
element[class="name"]
This is attribute equals selector and it will select the element with exact value. When you have multiple classes the exact match is not there and it does not select. Using attribute contains selector or other wild card selector would get the element. Following contains selector would get elements that have class1 as attribute class's value. It will get element with class name class123 as well.
element[class*="class1"]
I wonder why element[class="name"] seems to used primarily in
responsive emails instead of the usual .class?
This article probably talks about this.
Attribute selectors are being used to avoid an unusual glitch in
Yahoo! Mail, reference
It turns out that Yahoo! Mail ignores any styles that use attribute
selectors, meaning that you can use these in your #media queries to
ensure that Yahoo! Mail doesn’t override existing inline styles with
your #media -defined ones. Read more over here.
Related
This will probably be an extremely easy question to answer, but I am trying to create a one-stop-shop for setting up property values from SQL and would like to know an answer to the issue that just came up in brainstorming:
If you set a parent (let's say a form) to be Read-Only but set an object (lets say a button) in that parent to NOT be Read-Only, will the button be read-only? Also, what If the parent or child had !Important included?
I am trying to set up a priority system so users can set up these kind of property values without running into issues where unexpected things do not happen.
readonly is not a css property, thus no style. It goes directly into the html tag.
The key buzzwords for you to search are css inheritance and css specifity.
For a quick overview: Yes, there are fixed rules. Not every property is inherited. You can look them up e.g. in the MDN CSS Reference.
Which css rule kicks in depends on where you place the style rules and how specific your selector is.
Cascading order (source):
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
Specifity is like a score system. The rule with the highest score (=highest specifity) applies.
ID, e.g. #paragraph {...} (100 points)
Class, e.g. .redparagraphs {...} (10 points)
Tag, e.g. p {...} (1 point)
So the rule div p span {...} would have a score of 3 points, because of three tag selectors.
#wrapper .centered #main .fancynews .withoutborder p {...} would have 231 points and so on.
If two rules have the same score (specifity), then the last one processed counts (stylesheets are processed from top to bottom).
The "quick and dirty" trick for applying a style is to add an !important to the rule like
.alwaysredtext { color:#F00 !important; }
This will override whatever color rule you made and whereever (as long as they do not also have an !important). This is not recommended due to later maintainability problems.
p.s.: Don't miss the Specifity Calculator where you can enter and compare several selector rules and see which one "wins".
Only <input> and <textarea> elements support the readonly attribute, so not, what you are describing is not possible.
Not sure if this is possible or if I'm just not asking the right questions, but I'm looking to apply a global rule for a set of classes that have different suffixes.
ie.
.gallery {} would like these rules to apply also to .gallery-1, .gallery-2, gallery-3 {} etc... Without having to add those actual specific classes to my stylesheet each time a new gallery is made.
Does anyone know if this is possible?
with thanks.
You could use the attribute selectors. Possibilities include:
[class|='gallery'] - matches all elements whose class attribute is exactly gallery, or begins gallery-
[class^='gallery'] - matches all elements whose class attribute starts with gallery
Note that I'm not clear what happens if your element has more than one class, as class="some-class gallery-1"
You can use wildcards with attribute selectors to do just that. Something like this should work for your case:
[class*='gallery-'] {
do:something;
}
See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Note the "Summary" section in the link above, it describes the different behavior of the "wildcard" symbols.
A simple alternative would be to simply apply two classes to your html elements:
class="gallery gallery-1"
Here is a very similar question and answer Is there a CSS selector by class prefix?.
Use CSS Selectors
For your example, you'll need this:
[class^='gallery']
(get all elements with a class name beginning with gallery)
I am looking into doing some emails with html and css and been looking at the source code of some emails and i came across this decloration of the css in the head of a few emails.
*[class].tdwrap{display: inline-block !important;}
*[class].vspacer{ margin-left: 50px; }
I know that * usually means "all" but i have never seen the [class] part before and cant find a articles about it by doing several google searches.
Any ideas on what that means?
This was taken from the the source of an AppleMail email, maybe it is and AppleMail thing only?
[class] is an attribute selector and when it's preceeded by the universal selector (*) it selects any element that has a class attribute set on it, irregardless of what the attribute value may be.
Learn a bit more about selectors from the spec: http://www.w3.org/TR/CSS2/selector.html
This is the attribute selector. It selects any element that has this attribute (regardless of its value).
The [class] selector matches any element with the class attribute set (to any value). It's a standard CSS attribute selector, as defined in CSS2.1. I don't think it does anything here, since the .tdwrap and .vspacer require class attributes already.
The selectors could be replaced with just their class selectors.
I am trying to use one CSS class to many DIV. Is it a good practice? or else are there any disadvantages of doing that. because in VS it says "another object already uses this ID", not an error message but a warning.
CSS classes are meant to be reused. CSS IDs are meant to be used uniquely on a component. Are you sure you're using a css class?
There is nothing wrong with styling multiple divs at the same time. This is actually expected and not many people do that. To style all divs;
body {Body Code Here;}
div {Div styling here;}
Styling all div's with one class;
body {Body Code Here;}
div.YourClass {Div Styling Here;}
Notice how there is no space between the div and selector(.) That specifies a class in any div where as div .YourClass will search in all divs for a class. IDs are different than Classes, you can have multiple Classes on the page but only 1 ID on the page. To fix that message, make sure you are using Class instead of ID and search the page for that ID and if it comes up twice or more, thats your problem. Again Classes are reusable and IDs are single-element selectors. Hope I helped!
In css, class is meant to be reused, so it is ok. In case you don't know about id, id in css is meant to be used noce. But nowadays, I've seen few people use class all over place even they just use it once. So, just keep your markup and styling clear, use class or id in your way if you work alone [ personal project ] and keep it persistence when working alone or in a team.
html
<div class="class1 class2">afd</div>
<div class="button class1">asffsdf</div>
css
.class1 { /* styling your class1 here */ }
It is absolutely fine to use the same class for many elements in CSS. Be careful not to do the same for the "id" attribute, which really should only be used for a single element as it is considered a unique ID.
You can use same CSS class for any number of elements, but ID must be unique for each and every element in the page
ID is somewhat different from class. You can have multiple classes on page but ID should only be used once. Do follow best practices :)
i know... this information is not what exactly you want as answer but may be of some little help :)
example:
div.className { } //covers all div with a particular classname
Sometimes I find myself creating a CSS class for a single element. So instead, I can use an ID and set a rule for this ID. Which way is preferable stylistically?
I'd say that this is more of a person-by-person preference.
For me, I try to think ahead: will I ever create two of these on one page? If the answer is even vaguely "yes," then I use classes. If I can't see the need for creating a second of the particular element, I'll use an ID.
In terms of the ID itself, I try to name it something that I won't conflict with. For instance, I'll choose something like:
#aboutus_team_wrapper {}
It's long and ugly, but I know exactly what it's for, where I'm using it, and I know I'll never create something that conflicts with the name.
Hope this helps!
Don't forget about selector specificity! I avoid using ID selectors whenever possible.
Reference: http://www.w3.org/TR/CSS2/cascade.html (6.4.3)
An ID selector is 10 times stronger than a class selector. That means you would have to use 11 class selectors to cancel an ID selector, or you would have to append the same ID selector to every CSS rule you write, or my favorite, use inline styles or !important rules!
"But why use a class style on an element that I know is only going to show up once? That's what ID selectors are for."
Because ID selectors screw up the cascade. Consider the following (un-semantic) code to illustrate this statement.
<style type="text/css">
#header a { /*Selector Weight: 101*/
font-weight: normal;
}
.bold { /*Selector Weight: 10*/
font-weight: bold;
}
</style>
<div id="header">
Happily not bold.
Sadly, not so bold.
</div>
SO bold...
To make this work, you'd have to add:
#header .bold { /*Selector Weight: 110*/
font-weight: bold;
}
Great, now we have two bold classes. You can see how quickly this can ruin you. Imagine trying to deal with this on a full featured web application.
No hard and fast rules on this one, it's as much about:
why you're using the style
what you're doing
where you're going
more than the number of elements that are involved.
If a style only refers to one, unique element, an ID based selector is the most appropriate.
If a style may refer to multiple elements, use a class.
The other thing to keep in mind is ID based selectors have higher priority than class based ones. This helps if any of your unique, ID'd elements inherit styles from more generic, classed based rules.
I prefer to use the ids for the most important elements that are repeated in the page, such as the Stackoverflow logo (and all the header) on this page.
Use a CSS class when the elements are not page-specific and can be repeated among different pages, or many times in the same page.