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/
Related
Is it possible to hide an element via css from HTML markup "data-post-id="226""? I'm in wordpress and on the portfolio I need to hide an element on several posts, but since it's automated I can't do it manually.
I tried .data-post-226 { display:none; } since that works for page and post id's, but this is a little different since the id is in quotes.
.classname only works for classes, not for other attributes. You can select by attribute with square brackets, though.
[data-post-id="226"] will work as a selector to style the element that das data-post-id="226" as an attribute.
You want to use the attribute selector here (More info: https://css-tricks.com/attribute-selectors/)
In your case, this is what you need:
[data-post-id="226"] {
display: none;
}
What you are looking for is attribute selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
If you are new to this, I would recommend you reading about various ways you can select your elements using CSS selectors - https://www.w3schools.com/cssref/css_selectors.asp
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.
I have a CSS rule that goes like this:
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-1.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-2.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-3.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-4.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-5.k-content.k-state-active
{
/* CSS Properties */
}
Is it possible to make it shorter? Because I don't know how many elements with the ID #tabstripProjectSettings-x will it be there.
Here's an example for this:
http://jsfiddle.net/AVF3J/
Maybe you should try something like this:
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div[id^="tabstripProjectSettings-"].k-content.k-state-active {
/* css here */
}
The part div[id^="tabstripProjectSettings-"] says: select all divs whose ids start with tabstripProjectSettings-.
Though haven't tested it on your mega huge selector (:D), it should work. Can you bundle a fiddle though?
Don't style them using an ID, style them using a class.
Using an id (e.g. id="example" in html matched with #example in the css) will only style elements with that specific ID. You can style multiple ID items using the sort of code you have above; there's nothing technically wrong with it.
However, if there are several elements that you want to all have the same style, a much easier way would be to give them a class. In html this means putting class="example" into the element, and matching it with .example in the css. Thereafter, every element you want to have that style, just give it that class.
You can also combine multiple classes and IDs.
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 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.