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)
Related
I'm trying to select an element which has two distinct classes, unfortunately these class names are partially randomised (The markup is out of my control) e.g.
<div class="thing1_abc thing2_def"></div>
Where the second part of the class name is random, as in, the abc and def parts will not be consistent between each page load.
The only thing I could think of was:
div[class^="thing1_"][class^="thing2_"]{ }
But it seems you can't use multiple class-attribute selectors in a single selector, is there any way to achieve this? Or any alternative that will select this element based on it's classes?
The ^= relates to the beginning of the whole class atribute string, that's why thing2_ won't be matched. You could use *= instead, like this:
div[class*="thing1_"][class*="thing2_"]{ }
But that would also match some_class_thing1_. That might still filt your needs, if you can be sure that such a class will never exist. But otherwise, I don't see a pure CSS solution.
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.
I am facing issues writing a slightly complex CSS selector.
I want to select a div with "class" containing 'btn-group', but not 'open'
So I have something like;
div[class*='btn-group']:not([class='open'])
Now the issue is that there are around 5-6 elements that match the above condition. But I want to select the first out of that. How do I do the same?
Would prefer doing using nth-child..
What about: div[class*='btn-group']:not(.open):first-of-type?
[Edit]: This trick does not work if you have <div class="btn-group open"></div> as the first child... (as explained by #Jukka below) a JS-based trick will work, tho:
$("div[class*='btn-group']").not(".open").first()
.css({...});
// OR add a class
// .addClass("class");
http://jsfiddle.net/teddyrised/LdDCH/
try like this
div [class*='btn-group']:not([class='open']):nth-child(1) {
color:Red;
}
Using this you can select first child
Working Fiddle
You cannot. CSS selectors can’t be used that way. But if you provide a more specific HTML context (including containers for the div elements and a description of a pattern that the markup follows), there might be a way that works under some assumptions.
In particular, :nth-child and :nth-of-type only test whether the element is the *n*th child, or the *n*th child of its kind, of its parent. It does not take e.g. classes into account; the is no “nth of a class” selector.
I need to apply a style on a recurring element which has a fixed prefix in its ID. e.g. for the generated ID old-price-520, old-price is the prefix, and the numeric suffix will vary.
How do I apply styles to these elements, or how do i refer to them using CSS?
Here's an illustration of what i'd like to do:
#old-price-* {
// some styles
}
div[id|="old-price"]
would select all div Elements with id = old-price-*
Handycap is it's performance which is pretty poor, compared to the power of the # id-selector. Also it has a lower specificity than the normal #.
edit:
fiddle
You can try to use CSS3 attribute selectors like this:
div[id^=old-price]
{
// some styling
}
However you will need to add some javascript for browsers that do not support it
you can do so with the 'begin-with' attribute selector in CSS3, like so:
[Attr^="value"]
and the concrete example would look like this:
*[id^="old-price-"]
there are probably more methods of achieving the same outcome, a quick search came up with this attribute selectors depiction for a quick reference.
You can use jQuery to do this with an 'Attribute starts with selector'
http://api.jquery.com/attribute-starts-with-selector/
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