If I have a tag like this
<div id='testdiv' style='height:300px;'></div>
How can I write a css rule that says
select tag with id testdiv where it contains a style attribute that has height property whose value is less than 400px
Is this possible?
This is not possible in the current standard of CSS. CSS4 might include a selector for it, but that's for far in the future. However it is possible using JavaScript or jQuery.
It must be noted that IDs must be unique. You should use classes if you want to use the same name.
In jQuery, the filter function should be able to solve this.
var smallDivs = $(".test-div").filter(function() {
return $(this).css("height") < 400;
});
It might also be possible in SASS, where you can create functions.
Related
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.
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 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 using unobtrusive validation in an ASP.Net MVC3 app. I would like to style the label elements associated with required elements in a certain way.
My concern is not to tweak the visual indicators around the required field itself, but to modify the appearance of a different element based on the attributes of this element.
Now, I believe it would be possible to style the elements themselves just with CSS by using a CSS rule whose selector applied to all elements with the [data-val-required] attribute. It would look something like this:
input[data-val-required] { color: red; }
But is it possible to style the labels? To say (with a CSS selector) that a CSS rule applies to all label elements whose for attribute points to an input element that has the [data-val-required] attribute?
I'm currently applying styling with a little bit of jQuery currently, and it works nicely. But it would be even nicer if I could just set up a CSS rule and be done with it.
You can't get there from here. As #vlgalik says, the only CSS options are selectors that are 1) not supported on some browsers, and 2) have limited ability to find other elements, forcing you to construct your markup to comply.
So, your current solution -- use JQuery to find the labels and their corresponding inputs -- is your best bet.
However, I'd approach your jQuery solution in the opposite direction: first find all the inputs matching input[data-val-required], and for each of those, get its ID, then select the corresponding label: label[for="<id-from-input>"] -- that seems like it will be less work. But that's an optimization; if you don't have a lot of labels and inputs on the page, either direction will work fine.
This jsfiddle example is using CSS3 selectors, but there is a downside that the label must follow after input element in the HTML (can be placed before using addition CSS like in example).
Much simpler and effective would be to give the label element class attribute like:
<label class="required">
or to place the label input pair in div element:
<div class="required">
<label for="input1">Label 1</label>
<input id="input1" ... />
</div>
and apply desired CSS styling by simply using:
.required label {
...
}
The example you gave should be very close to what you would need to do. Try using this:
input[for=data-val-required]{}
This selector is based off of the attributes of a given tag. That should give you what you are looking for.
Is there a way in CSS to select an element which has a sub-element with given class?
I want to apply a style to a <ul> list that has <li> with a particular class.
This isn't possible with css, since you're working against the cascade by selecting an ancestor based on a descendant.
The best I can offer and suggest is a jQuery approach:
$(document).ready(
function() {
$('.givenClassName').parent().addClass('something');
}
);
This finds the element with the givenClassName and then selects its parent element and adds the class something to that element.
#Blaenk suggests an alternate approach, which is more versatile (his approach doesn't require the ancestor element to be the parent of the element you're selecting by).
Obviously other JS libraries, and JS all by itself, can achieve the same effect, though I can't offer particular advice, since I'm still only just familiarising myself with JS and mostly with jQuery (why yes, I am ashamed of myself...).
As far as I know, this is unfortunately not possible with CSS.
If you can use Javascript though, jQuery has a nice way of doing this using the closest() method. The documentation for it even lists an example very similar to yours: selecting a ul that has an li of a particular class.
$("li.some-class").closest("ul");
Forgive me if this is not the best way to do it in jQuery. I'm actually new to jQuery and this is one of the methods I've learned so far, and it seemed fitting.
No. The CSS Cascade does not allow for this kind of selector.
The best solution in this case would be either to modify the DOM with JavaScript or to change up the resultant HTML to add classes to the ul tags.
ul li {
/* styles */
}
Is this what you're asking for?