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*/}
Related
I have several <hr /> and I use the below css in media queries
hr:first-child {
no luck, why? My scope of media queries is ok, other class work fine but not this one, I wonder.. ??
try this:
hr:first-of-type
{
display:none;
}
As the name of the selector suggests, :first-child refers to the first child of the element, and :first-of-type refers to the first element of that type. I believe you are looking for the latter.
To select the first HR You need to use
hr:first-of-type {display: none; }
Using the :first-child pseudo selector selects every hr element that is the first child of it's parent.
Using the :first-of-type pseudo selector selects the first hr element of it's parent
Also you can try like the following:
<hr class="hideinsmallscreen" />
Change the class name as you want .hideinsmallscreen
Within media query you can use the class to hide that <hr/>
.hideinsmallscreen{
display:none;
}
I am stylizing a CSS element, and I was wondering if I could use multiple :selectors on one CSS element.
For instance:
p:hover:after {
content: "Hello!";
}
Because, when I want the p to be hovered over, I want the :after selector to also be called.
That specific example is completely valid, it works as demonstrated here.
As of now, the main limitation(s) pertaining to pseudo elements, is that:
CSS3 Selectors - 7. Pseudo-elements (reference)
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.
Thus, neither of the following selectors would work: p:hover:after:after, p:after:hover
There is no limit on the number of simple selectors that can be chained together within the selector. And as #BoltClock states in the comments, there can only be one type selector or universal selector.
CSS3 Selectors - 4. Selector syntax (reference)
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector.
Here is a relevantly long selector that works: (example)
#parent:first-of-type:first-child > .child:last-child p:not(#element):not(#otherelement):hover:after
Multiple dynamic pseudo-classes are permissible.
An example of combining dynamic pseudo-classes:
a:focus { background: yellow }
a:focus:hover { background: white }
The last selector matches A elements that are in pseudo-class :focus
and in pseudo-class :hover.
Illustration: http://jsfiddle.net/BhKuf/ (remember to hover)
So when writing CSS, I often see people or websites have things like
.img > border > div > #select {color:white}
Since I have started web development, I have only used... single CSS classes.
I'm not sure that's entirely correct, but basically they are all connected.
What is the name of this technique, and do you guys have any useful resources I could read up about on this?
I did try and Google this pre-hand, but I simply didn't know how to word this on Google.
The entire sequence .img > border > div > #select is usually simply called a selector, since it's the part of the CSS rule that selects elements to apply the rule to. There is an entire specification devoted to selectors however; CSS just describes the role of a selector in a CSS rule.
> is a combinator, specifically the child combinator. Combinators are used to express relationships between two elements, in this case a parent-child relationship: .parent > .child. The rest, .img, border, div and #select are all simple selectors of various kinds.
A typical selector is made up of simple selectors and combinators. You can have a selector with just one simple selector .child, multiple simple selectors div.child, combinators #parent > div.child, or any combination of those.
The > sign is essentially a way of specifying that an element belongs to a parent element. In your case, the element with the id of "select" has a parent element that is a div that has a border that has a parent element that has a class of "img." More info here.
These are known as child selectors.
It's covered in the W3 specification, and the whole guide itself is a good resource with simple examples.
It's a selector and represents the HTML document element hierarchy that it applies to, i.e.
A class of image that has a border which has a div which has an ID of select, apply a color of white.
they're called CSS Selectors.
See here:
MDN
Here is a simple and brief explanation with the selector you provided
.img > border > div > #select {color:white}
The above CSS is a hierarchy of selector where, the rule is applied to #selector that is within div tag, border tag , and class .img
For example
<img class="img"><border><div><div id='select'>some content</div></div></border></img>
Here the above CSS rule is applied. Similarly rule can be created as follows
element>element
selector>selector
element>selector
selector>element
For more information check this out http://www.w3schools.com/cssref/css_selectors.asp
Hope this helps!
It's a silly question, but well. What version is the ">" in CSS? I can't find it in google because I don't know the name of this.
Example.
CSS
.test {
width:200px;
height:200px;}
.test .color {
width:50px;
height:50px;
float:left;
background:red;}
.test:hover > .color {
background:blue;}
HTML
<div class="test">
<div class="color"></div>
</div>
What version of CSS it is? 2 or 3? thanks
It marks the immediate child of a node. Hence its name "child selector".
So in your case .test:hover > .color selects any node with the class color that is an direct child of a hovered node with class test.
For more information have a look at the respective MDN page.
The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first.
That is called the child selector, and it is part of CSS2.
Documentation at http://www.w3.org/TR/CSS2/selector.html#child-selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
The selector is for direct descendants.
So div > div will select all div elements that have a direct parent element that is also a div.
It is CSS 2.
It was recommended for CSS 3 selectors as well.
See on MDN.
That would be a CSS selector for that is directly below (in the document tree) another element. As in it's child element.
This CSS3 cheat sheet is very helpful: CSS3 Cheat Sheet, not only for answering the question you have but other uncommon selector types.
You can also find what is supported on what browswers with this: Can I use... Support tables for HTML5, CSS3...
I just noticed that CSS :first-child and :last-child don't work when used on the same element. Only one is used. I'm wondering why is that and if there is any workaround to that in CSS? It seems like CSS bug to me - first element can be also last element.
I couldn't find anything in Google on that subject. Each tutorial assumes that there will be at least 2 elements.
I'm looking for something like: "first child is also last child" selector. Does it exist?
I'm wondering why is that and if there is any workaround to that in CSS? It seems like CSS bug to me - first element can be also last element.
It's not a bug. It's how the cascade works: if an element is both the first child and the last child, then if you have :first-child and :last-child in separate rules and they both match the same element, then anything in the later declared or more specific rule will override the other.
You can find an example of this behavior here, with the border-radius shorthand property, and workarounds that include using the component properties instead of the shorthand, as well as specifying a separate rule altogether using one of the following selectors...
I'm looking for something like: "first child is also last child" selector. Does it exist?
Literally, you would chain both pseudo-classes like this, which works fine:
:first-child:last-child
However there exists a special pseudo-class that acts the same way:
:only-child
The main difference (in fact, the only difference) between these two selectors is specificity: the first one is more specific as it contains one additional pseudo-class. There is no difference even in browser support, as :last-child and :only-child are both supported by the exact same versions of each browser.
I realise I'm massively late to this, but you can also use is CSS's :first-of-type and :last-of-type. For example:
<blockquote>
<p>Some text you want to quote</p>
</blockquote>
This CSS will add quotes to the paragraph:
blockquote{
quotes: "“" "”" "‘" "’";
}
blockquote p:first-of-type:before{
content:open-quote;
}
blockquote p:last-of-type:after{
content:close-quote;
}