IE7 doesn't support :last-child pseudo selector. I am thinking of explicitly adding a class name to denote it as the last element but not sure how to select this element inside a css file. Anyone have any ideas on how to do this ?
.class1.class2 {color:red}
and
<div class="class1 class2"></div>
or install IE7-js and :last-child will "just work".
If you have
<div class="element"/>
<div class="element last"/>
You can just do
div.element
{
// styles effect both divs
}
div.last
{
// style will only effect the second element and overides because lower in the css
}
One extra thing to note about multiple classnames is that IE6 can not handle them properly. It will only consider the last classname in the list:
.class1.class2 {color:red} => .class2 in IE6
Related
Here is the official documentation for the CSS3 :not() pseudo-class:
http://www.w3.org/TR/css3-selectors/#negation
and the proposed CSS Selectors Level 4 enhancement:
http://dev.w3.org/csswg/selectors4/#negation
I've been searching the implementation and browser support for :not(), but the only examples I found were with a single element or with a direct child of an element, e.g.:
div *:not(p) { color: red; }
The example above works when <p> is a direct child of <div>, but it does not work when <p> is a more distant descendant of <div>.
div :not(p) {
color: red;
}
<div>
<ul>
<li>This is red</li>
</ul>
<p>This is NOT</p>
<blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>
If the answer is in the official documentation above, then I didn't find/understand it. As I said, I have searched this site and the web but couldn't find any discussion about the support or lack thereof of :not() as grand-children of another element.
Is this supposed to work like I think it should?
Is this supposed to work like I think it should?
No, the behavior you're seeing is correct.
In your last example, although the <blockquote> contains a <p>, it's the <blockquote> itself that's matching *:not(p), as well as the condition that it must be a descendant of the <div>, which it is. The style is applied only to the <blockquote>, but it is then inherited by the <p> inside it.
The <p> element itself still counts against the negation, so the <p> itself is still being excluded from your selector. It's just inheriting the text color from its parent, the <blockquote> element.
Even if none of its relatively close ancestors matched the selector, you have elements like html and body to worry about as well — although you could probably just tack on a body selector in the very beginning:
body div...
This is why I often strongly advise against using the :not() selector for filtering descendants, especially when not qualified with a type selector (like div in your example). It doesn't work the way most people expect it to, and the use of inherited properties like color only serves to compound the problem, on top of making it even more confusing for authors. See my answers to these other questions for more examples:
Why doesn't this CSS :not() declaration filter down?
CSS negation pseudo-class :not() for parent/ancestor elements
The solution to the problem described is to simply apply a different color to <p> elements. You won't be able to simply exclude them with a selector because of inheritance:
/* Apply to div and let all its descendants inherit */
div {
color: red;
}
/* Remove it from div p */
div p {
color: black;
}
On Selectors Level 4: yes, :not() has indeed been enhanced to accept full complex selectors that contain combinators. Essentially, this means (once browsers begin implementing it) you will be able to write the following selector and have it do exactly what you want:
p:not(div p) {
color: red;
}
In case anyone is interested, this works in jQuery today.
The color is assigned to the blockquote, and is then inherited by the p.
:not(p) just makes it so that the styles are not directly applied. They are still inherited though.
I am creating an industry section, like the one seen in https://squareup.com
I started using nth-of-type to call different images in the css. http://cssdeck.com/labs/full/vinttbws
However, it doesn't work when they are not all in the same parent. How can I get that to work?
Is there another way to accomplish this without having to make a div class for each industry with an image?
You're right, nth-of-type won't work because they don't share the same immediate parent.
I would highly recommend that you do what you were suggesting with making a new class for each one.
You could also give each parent a different id and then your css selector would just ask for the child:
#restaurant > a {
background-image:url(some/picture.jpg);
}
#retail > a {
background-image:url(some/other/picture.jpg);
}
I've made a bit of an example here(with colors instead of pictures): http://jsfiddle.net/mo9yazjm/
Edit: I made the change now to your CSSDeck example: http://cssdeck.com/labs/t4xnpzgf
You can do either with adding different CSS class to the HTML markup, or use only CSS3 nth type selector.
The first method is more verbose, because you have to modify and update your markup consistently with CSS. The latter is best in the matter of consistently and maintenance because you operate only on CSS.
CSS Class on Markup
HTML
<div class="some-class">Restaurant</div>
<div class="other-class">Retail</div>
<div class="some-other-class">Gym</div>
CSS
.some-class a {background-color: red;}
.other-class a {background-color: gold;}
.some-other-class a {background-color: aqua;}
Here is the live example.
CSS3 Only
Try add the style to the div with nth-of-type CSS3 selectors, and apply the style to the anchor:
.col-md-4:nth-of-type(1) a {
background-color: red;
}
Here is the working link. I use the background-color, you can use the background-image, or whaterver your layout need.
You can use the nth-of-type on the parent (.col-md-4:nth-of-type(1), etc)
:nth-of-type applies to child elements of the same parent, while you have your pictures in separate divs. You'll want something like this:
<div>
<a></a>
<a></a>
<a></a>
</div>
This question already has answers here:
What's the difference between an id and a class?
(17 answers)
Closed 8 years ago.
I think I understand how IDs and classes are used (IDs for a single element on an HTML page, classes for many elements). But why bother with IDs in the first place; why not just use classes for everything?
It's much easier to target a particular element using script while using id.
ID's have heigh CSS specificity. If you have some elements having the same class and you need to apply particular styles to one of those elements, you can use an Id. Since id has more specificity, the css applied by class will be overridden…
For eg, consider the following scenario
HTML
<div class='box'></div>
<div class=' red box'></div>
<div id='red' class='box'></div>
<div class='box'></div>
<div class='box'></div>
CSS
.red{
background:red;
}
#red{
background:red;
}
.box{
width:50px;
height:50px;
background:dodgerblue;
margin:5px;
}
Here, only the element with id red will have red background as seen in this JSFiddle.
The css applied by class red will be overridden by css in box class since they have same specificity and .box appears later.
Side note: You can also override css using !important keyword but IMHO it's a bad practice. Assume you'v applied css properties having !important keyword for an element, and your colleague is trying to modify the same properties using something like javascript/JQuery - he'll be puzzled why those styles are not being applied - Even if script is injecting inline styles, it won't override the !important rules. But if you use a more specific selector, like an ID in our case, inline styles will take precedence as expected, which will avoid confusion and might save a bit of time
Because ID's are more important than classes.
If you make something like this:
.hello {
color: green;
}
#goodbye .hello{
color: red;
}
Every class hello will have color green, but when they are inside a div with id goodbye they all will be red.
So it is pretty important to use id's sometimes, because they are much stronger than classes.
At least two reasons:
It adds to improving your DOM structure.
Elements with IDs are easier to target with JavaScript.
So I have the following case:
First Element Second
Element Third Element Forth Element
Fifth Element Sixth Element Eight
Element
I want to add a special rule only to odd elements from the list. The problem is that each element does not have it's specific class so I can apply the styling to them.
I tried something like this:
.class :even {color:white;}
EDIT : Please don't appologize for breaking some rules, but learn the rules ;)
Thanks!
You can take a look here: http://www.webbykat.com/2013/01/styling-every-nth-element-css3-jquery-and-grid-view-templates
This is an example that might help you:
.class ul li:nth-child(2n) {color:white;}
The selector is :nth-child(even)
And you might have a excess space character before the colon.
I have a series of elements with the class .tab-pane attached to it. They also each have their own unique ID. I am trying to select every .tab-pane that does not have the id #home. I have tried .tab-pane:not#home{...} but it did not work. Any suggestions?
Sample HTML
<div id="home" class="tab-pane">...</div>
<div id="myself" class="tab-pane">...</div>
<div id="contact" class="tab-pane">...</div>
<div id="resume" class="tab-pane">...</div>
Try instead:
.tab-pane:not(#home) {
color: red;
}
JS Fiddle demo.
The thing that you're not-selecting appears within the parentheses of the :not() selector, rather than appearing as a 'chained' pseudo-selector.
In this specific case, since the element you want to have not-styled is the first element, you could also use the general-sibling combinator ~ to style subsequent siblings differently:
#home ~ .tab-pane {
color: red;
}
JS Fiddle demo.
But this would, and could, only work if the differently-styled (or un-styled) element is the first, since CSS can only select elements that appear later in the DOM, either as subsequent siblings, or descendants, of earlier elements.
References:
Selectors Level 3, negation :not() pseudo-class.
Maybe you meant to do this:
.tab-pane:not(#home)
You can access each of the individual classes by either using .tab-pane:eq(noOfClass) selector
Check examples here
OR You can also use :not selector .tab-pane:not(#home)
You can also try this (this is just like regular expressions)
.tab-pane:not([id^='home'])
{/*your code*/}
If you want to not include the id's which start with letter "h" then try the below one:
.tab-pane:not([id^='h'])
{/*your code*/}