Is there any way to select a CSS based on one particular 'id' used in the page.
For example.
HTML
<li id="button_preview" href="#inline_content2"></li>
<li id="button_suspend" href="#inline_content1"></li>
Here I need to select one style sheet for #inline_content1 and another stylesheet for #inline_content2. Is it possible to do?
Sure, ID selectors.
li#button_preview {color: red;}
You can't select a specific style-sheet based on the attribute-value, or id, of an element, but you can apply a particular style to an element based on its attribute value:
li[href='#inline_content1'] {
/* css */
}
li[href='#inline_content2'] {
/* css */
}
Or, to use the id:
#inline_content1 {
/* css */
}
You can create a css like this:
#button_preview {
}
http://www.w3schools.com/css/css_id_class.asp
Related
In order to avoid adding an extra is-icon class to each of my icon elements, such as this:
<style>
.is-icon { // Base styling of icon }
.icon-car { // specific car styling }
</style>
<span class="is-icon icon-car">car</span>
I am using this CSS to solve it:
<style>
span[class^="icon-"] { // base icon styling }
.icon-car { // specific car styling }
</style>
<span class="icon-car">car</span>
<span class="icon-cat">cat</span> ETC...
My question is: does span[class^="icon-"] css selector is expensive? and which one is a better practise? My understanding is Substring Matching css attr selector is not a bad practise at all, it's just more of a preference. Please help me understand this.
I am working on a web application, and i have a div with ID = WebPartWPQ2 .I define the following css rule to define its min-width:-
#WebPartWPQ2 {
min-width:1280px;
}
currently this will apply to all the Divs that have this ID. but currently i have the following div :-
<div id="WebPartWPQ2" class="ms-wpContentDivSpace " style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">
which have the associated ID and a class named "ms-wpcontentDivSpace" , so how i can exclude this Dic that have this class from my above css rule ?
#WebPartWPQ2.ms-wpContentDivSpace {
min-width: 0; /*fallback*/
min-width: initial;
}
You could also change your declaration to this:
#WebPartWPQ2:not(.ms-wpContentDivSpace) {
min-width:1280px;
}
I personally think the first one is easier to read.
In the first place, it is not right to have several elements in the same document sharing the same ID. If you decide to give an ID to an element, it must be unique.
If you want to differenciate groups of elements, classes are intended for that.
ID stands for identifier, which means that it must be unique. Use class instead of id, if you intend to use the same rule at more tags at the same page and do not duplicate ids.
.WebPartWPQ2:not(.exception) {
min-width:1280px;
}
<div class="ms-wpContentDivSpace WebPartWPQ2 exception" style="" allowexport="false" allowdelete="false" allowremove="false" width="100%" haspers="false" webpartid2="e5a46e55-7c76-4d8c-be2c-e3022b7080fc" webpartid="e8865b18-0e92-4276-9945-9091e47e7b0f">
the :not() selector would be useful, as others have already mentioned. It has good support in modern browsers, but not IE8.
If you needed an IE8-friendly solution,first declare the rule that is true most of the time:
#WebPartWPQ2 {
min-width:1280px;
}
Then declare a rule that overrides the first with a higher specificity:
#WebPartWPQ2.ms-wpContentDivSpace {
min-width: initial;
}
I have a list of <div>s. Each <div> has class zebra. Until now I've used the following to stripe the list:
.zebra:nth-child(2n) { /* colors */ }
Now I'm implementing a filtering feature, such that some of these <div>s will have a class hidden. I tried updating my css to
.zebra:not(.hidden):nth-child(2n) { /* colors */ }
But that had no effect. What am I missing? How can I combine these selectors so that only the showing .zebra <div>s are considered in the :nth-child(2n)?
Here's a fiddle of what I'm describing.
UPDATE:
there is an unknown number of .hidden elements, and an unknown total number of elements. (the list is data-driven, not static).
I'd really rather not do any of:
run a javascript every time a filter control is touched, just to re-color the showing list items.
remove an element entirely when it's hiding. this makes re-adding it non-trivial (afaict).
Instead of removing the element as Justin suggested, you could replace it with an element of a different tag. We could use details, for example:
var placemarker = document.createElement("details");
node.parentNode.replaceChild(placemarker, node);
placemarker.appendChild(node);
Then, instead of using :nth-child, use :nth-of-type.
details { display:none; }
div.zebra:nth-of-type(2n) { /* colors */ }
Unhiding the element can then be done with:
placemarker.parentNode.replaceChild(placemarker.firstChild);
See this static example.
if you don't mind delving into jquery..
$('#yourHiddenElement').remove();
will remove it so that your css shades alternate.
http://jsfiddle.net/NYvcv/1/
I would suggest using this instead of applying the class 'hidden' to the element you want to hide.
If you know there will be a limited number of .hidden items, you can do something like this:
.zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2:nth-child(2n) {
background: inherit;
}
.zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n) {
background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n+1) {
background: inherit;
}
And so on. This particular example breaks if there are more than 2 hidden items.
One possible solution:
use jQuery to change the .hidden element's type to, say, <li>. Use :nth-of-type instead of :nth-child.
http://jsfiddle.net/Nb68T/1/
I've got a jquery slider function on a page, and when the slide rotates I need the style of a LI tag to change.
So when the slider goes onto a li the class looks like this:
<li class="first sliderkit-selected">
And when it moves off it looks like this:
<li class="first">
But when the class goes to "first sliderkit-selected" I need it to be referenced from the style sheet but not sure how it is constructed, so far I've played around with:
li.sliderkit-selected li.first {
background-color: red;
}
But it doesn't seem to pick it up.
I know you could use a comma inbetween each class, but I want a style to be referenced exclusively when those two class's are together, if that makes any sense.
Thanks.
You're looking for li.sliderit-selected.first:
li.sliderkit-selected.first{
background-color: red;
}
See also:
CSS Selectors Level 3: Class selectors
The following rule matches any P element whose class attribute has been assigned a list of whitespace-separated values that includes both pastoral and marine:
p.pastoral.marine { color: green }
This rule matches when class="pastoral blue aqua marine" but does not match for class="pastoral blue".
To select a DOM element with multiple classes, concatenate the classes in the selector:
li.sliderkit-selected.first {
background-color: red;
}
If you want to select an element with multiple classes, you simply append the classes with a dot, like this:
li.first.sliderkit-selected { /* your rules */ }
This means "a li tag with the class first and the class sliderkit-selected".
You can write like this:
.sliderkit-selected.first {
background-color: red;
}
OR
.first.sliderkit-selected {
background-color: red;
}
This is probably a case of trying to run before I can walk, however... I have the following code:
<div class="hidden" id="repair_complete">
// some code
</div>
I was under the impression that if my CSS file contained:
#hidden {
display: none;
}
... then the div content wouldn't display. However, it seems to only adopt this behaviour if the CSS file contains a reference to the div id:
#repair_complete {
display: none;
}
In a book I'm working through the opposite seems to be true - the style sheet refers to the class name, not the id.
Any ideas where I'm going wrong?!
Your CSS syntax is incorrect.
If you want to access this div, you can do it like this:
/* By class: */
.hidden {
display: none;
}
/* By ID: */
#repair_complete {
display: none;
}
Note that to access an element by class you use a dot before the class name. You use a hash before the ID.
The other answers have the technical stuff right: you need .hidden, not #hidden.
Now you have to decide whether you want to attach CSS to divs by class or id. I find classes are better in the long run, unless you are really certain that there will ever really and truly be one of the thing you are making.
Also, don't forget that you can attach more than one class to an element:
<div class="red fat shallow">blah blah</div>
Then you can style this element with any of these selectors:
.red {...}
.fat {...}
.shallow {...}
.red.fat {...} /* Applies only to things that are both red and fat */
.red.fat.shallow {...} /* Very specific */
/* etc. */
A "." before the name will refer to classes, and a "#" will refer to ids:
.hidden
{
display: none;
}
You need:
.hidden{
display:none;
}
period is a class specifier, pound sign is for id's.
To use class name use the dot.
i.e.
.hidden refers to the class name
#repair_complete refers to the id.
To refer to an element's ID you use the # selector, to refer to it's class name you use the . selector.
So in your example you would use
#repair_complete {
display:none;
}
or
.hidden {
display:none;
}