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.
Related
In my wordpress site, the numbers of my div ids for "chimp-button-*" keep changing automatically. Rather than needing to add a new div id each time it changes, is there a way to use a wildcard to capture all div ids starting with chimp-button?
Here's what I have:
#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}
I'm wanting to do something like this...
#chimp-button-* {
position:relative !important;
}
Sorry, I'm a CSS noob.
You can select these elements with an attribute selector, so [id^="chimp-button-"] would work, however it would also be a poor approach to managing styles.
Instead of trying to select elements based on the an ID pattern, give all these elements a common class attribute, such as class="chimp-button", you can then select all the elements with .chimp-button.
This is called to attribute-selectors
Used to this
[id^="chimp-button-"],
[id*="chimp-button-"]{
// here your style
}
More info attribute-selectors/
What you need is called attribute selector. An example, using your html structure, is the following: div[class*='chimp-button-'] {color:red }
In the place of div you can add any element, and in the place of class you can add any attribute of the specified element.
See demo
See here and here for more information on CSS attribute selectors.
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 have a css file which styles my tables, although I have one table where I would like to use a different style, or no style? is there a way I can do something like <table style="no-style"> and then it is plain and ignores the CSS?
I have looked but I can not find anything related!
Use class definitions for table properties in your CSS file. Whenever you want them, use with class property.
CSS
table.myClass {
...
}
HTML
<table class="myClass">...</table>
<table class="anotherTableWithAnotherClass">...</table>
CSS are cascading style sheets, they only style an element. Can't manipulate anything. You will need to use JavaScript.
Best way I know of, is to use CSS classes for different styles. And use javascript to switch them or remove them.
You need to explore CSS in more depth, and one thing you might focus on is classes. You can create a "class" of styles, and apply it to a particular HTML element like a table, and not have it affect another table you want to leave "plain."
.foo {
border : 1px solid black;
}
Then apply that class to your HTML element:
<table class="foo">
...
</table>
Another way to approach the problem is with selectors.
No, you cannot take off a style that way – there is no way in CSS to say “don’t apply any of my styles inside this particular element.” You can only override style settings. For example, if you have a setting like * { color: red } in your stylesheet (just a foolish example), you cannot add a rule that would exclude a particular element and make the browser apply its default color inside it. But you can set table#foo * { color: black; } to make all text inside a table with id=foo have the black color.
Overriding overall style settings inside a table that way isn’t trivial, but certainly possible. You just need to be explicit about the style you want; you cannot say “use browser defaults.”
However, there’s an indirect way, in a sense, though it is seldom a good idea: If you put your table in a separate document and embed it via an iframe element, then the table will be displayed according to the CSS code specified for the embedded document, quite independently of the style sheets for the embedding document. At the extreme, if you specify no CSS code for the embedded document, it will appear as per browser defaults (though inside a subwindow, an inline frame, with dimensions set by the embedding document).
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 have a page that looks like: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.
I'd like to use a grid system to style the page, all of which seem to rely on giving the divs mentioned a class based on their presentation. But I don't want to do this (and can't because of the way the markup is generated)
Is there a way to do this, without just putting a class on the divs? I could copy the details of the class desired to a stylesheet mentioning the divs by id, but that feels wrong.
Edit to clarify:
The OP wants to avoid adding class="grid_3" etc. to the HTML, but also doesn't want to add #header { width: 960px; margin: 0px; } (which I think is okay) – Rory Fitzpatrick 3 hours ago
Exactly, I don't want to put presentation information in my HTML, but I hoped I wouldn't have to just take the css classes that make up the grid system apart, and apply the relevant parts (like margin:0px and width:960px), since that is bad from a maintenance and reuse angle.
So, I'll look at an automated system for doing what I need, unless there is an answer to how do you apply a css class to an HTML element, using css, without adding class="blah" to that element? Because that doesn't seem like a crazy thing to want to do to me.
Well if you use blueprint-css as your grid system you can use the compress.rb to assign the rules for given bp framework classes to a specific selector of your choice like #footer or what have you. for example in your project yaml you could have:
semantic_styles: # i dont think this is the right key definition but you get the idea
'#footer,#navigation': ['span-12','clearfix']
'#footer': ['push-1']
# etc...
Then when you call compress.rb on the project file it will roll up the necessary declaration from the array of selectors on the right into the selector on the left producing:
#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */}
#footer {/* declarations from .push-1 */}
But all in all this is essential an automation of copying the declarations to a separate file that you say seems "wrong". But i mean other than doing this (automated or manually) i dont see what the possible options could be.
I'm not sure I understand the question. Why don't you want to put styles in a stylesheet and reference them by id?
#header{
position:relative;
...
}
I have the same reservations about grid systems, adding class names just goes against separating markup and style (but is often sacrificed for productivity).
However, I don't see what's wrong with setting the right column widths and margins using your own CSS. You could have a specific site.grid.css file that contains only selectors and widths/margins for the grid. I think this is perfectly okay, it's just a way of using CSS like variables. For instance, all 3-column elements would appear under
/* 3-column elements, width 301px */
#sidebar, #foobar, #content .aside {
width: 301px;
}
Then rather than adding class="grid_3" to your HTML, you just add the selector to the CSS.
You might want to consider using the class names initially, until you're happy with the layout, then convert it into CSS selectors. Whichever works best for your workflow.
If you don't have access to the markup you must either copy the styles, referencing the ids, or maybe you can apply the class to the ids using javascript?