I want to select the first element of a parent matching a specific type; the css equivalent of $(parent).children()[0]. For example, h1 tags that are the first child of a parent:
<div>
<h1 id="foo"></h1> // match
<div></div> // not match
…
</div>
<section>
<h1 id="bar"></h1> // match
<div></div> // not match
…
</section>
<div>
<div id="baz"></div> // not match
<h1 id="qux"></h1> // not match
…
</div>
jsfiddle
EDIT I am aware that there is no 'parent' selector.
I'd suggest, if you want to match the first h1 of a parent element (in compliant browsers) using :first-of-type:
h1:first-of-type {
/* CSS to style the first h1 of its parent element */
}
If, however, you want to style a h1 element only if it's the first child of its parent:
h1:first-child {
/* CSS to style the h1 only if it's the first-child of its parent element */
}
Related
How can I specify :first-of-type of the entire document?
I want to style the first <p> of the HTML, no mater where it is located (I don't want to write section p:first-of-type because it may be located elsewhere in a different HTML document).
p {
background:red;
}
p:first-of-type {
background:pink;
}
p:last-of-type {
background:yellow;
}
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>
With CSS alone this unfortunately isn't possible. The documentation for the :first-of-type pseudo-class states:
The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.
This means that :first-of-type is applied to the first element of its type relative to its parent and not the document's root (or the body element, in this case).
JavaScript solutions
:first-of-type
We can achieve this by introducing some JavaScript. All we need for this is JavaScript's querySelector() method, which pulls the first matching element from the selector specified.
In this example I've altered your :first-of-type pseudo-class to instead be a class of "first-of-type", then used JavaScript to add this class to the element returned when using querySelector('p'):
document.querySelector('p').className += ' first-of-type';
p {
background:red;
}
p.first-of-type {
background: pink;
}
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>
:nth-child and :last-of-type
As for :nth-child and :last-of-type, we can instead make use of a similar method JavaScript gives us: querySelectorAll(). This method pulls all matching elements into a NodeList (which is similar to an array), which we can then iterate through or select specific elements from within through the index:
var elems = document.querySelectorAll('p');
// nth-of-type = NodeList[n - 1]
// e.g. to select the 3rd p element ("333"):
if (elems.length >= 2)
elems[2].className += ' nth-of-type';
// last-of-type = NodeList length - 1
if (elems.length)
elems[elems.length - 1].className += ' last-of-type';
p {
background:red;
}
p.nth-of-type {
background: pink;
}
p.last-of-type {
background: yellow;
}
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>
Note that I've included if statements around both selectors to ensure the elems NodeList has enough elements, otherwise an error will be thrown.
Sure this is a too easy question but incredibly I did not understande why this code does not run as desired.
HTML:
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
CSS:
div:not(.remember) .foo
{
color:red;
}
Here the JsFiddle.
I would like that every item with class .foo OUTSIDE a parent with class .remember will be red, but it seems that "not" clause does not fire.
Where is my error?
Your upper most <div> doesn't have .remember, it passes your selection and so .foo has styles changed. Use the child combinator.
Your selection requires that the parent that isn't .remember is also a <div>, because you haven't given your second .foo a parent, in this case, its parent will be <body>. If you don't make this restriction, it is black in colour, as expected.
:not(.remember) > .foo {
color:red;
}
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be black)</a>
</div>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
Here is a working jsfiddle
The a.foo was not inside a div, it is fixed. The div:not(.remember) .foo expects the link to be inside of a div.
<div>
<div class="remember">
<a class="foo">INSIDE text (Should be inherited)</a>
</div>
<br>
<a class="foo">OUTSIDE text (Should be red)</a>
</div>
There was no style for div.reminder .foo, it should specifically inherit from the parent style.
div:not(.remember) .foo
{
color:red;
}
div.remember .foo { color: inherit; }
In the above fiddle, I added the first line which should represent any styles already set to the page (parent containers and etc). Its purpose is to play with it in order to see how the inner content behaves. You can remove it safely, the behavior will be as expected.
The div.remember .foo will simply inherit them rather than force something else. However
a.foo{color:red;}
.remember a.foo{color:black;}
This will cause all .foo elements to be red, unless it is nested inside the parent .remember, it will then be black.
http://jsfiddle.net/92gnt7qt/
This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 8 years ago.
What's the difference between
tag.class and tag .class
or
tag#id and tag #id?
tag.class matches all elements with name tag and with the class class, e.g.:
div.foo { color: red; } matches <div class="foo">
tag .class matches all .class elements that are descendants of tag elements (note the space between tag and .class):
(Remember that "descendants" includes all children, their children, and so on - whereas, in comparison, the > (child selector) only selects immediate children and not any grandchildren.)
div .foo { color: red; } matches the <span> in <div><p><span class="foo">
tag#id and tag #id are similar to the above, except matching on the id attribute instead of the class attribute[1]
div#foo { color: red; } matches <div id="foo">
div #foo { color: red; } matches the <span> in <div><p><span id="foo">
Remember that because id="" attributes are meant to be unique that additional selectors may be superfluous, e.g. div#bar could be simplified to just #bar (unless you're reusing the same CSS rules on different pages where #bar may have different element tag names).
[1]: This is true in HTML, in other SGML and XML languages using CSS the .class and #id selectors can be mapped to other attribute names.
tag.class would mean a tag with class='class'. Something like this:
<!-- This tag would be selected -->
<tag class="class">
...
</tag>
tag .class would mean an element whose class='class', and is a descendant of a <tag>. Something like this:
<tag>
...
<!-- This div would be selected -->
<div class="class">
</div>
...
</tag>
In general, something like selector1 selector2 would mean an element that matches selector2 and is a descendant of an element that matches selector1. Consider this example:
CSS:
/*
div.face matches a div with class="face"
div.eye#left matches a div with class="eye" and id="left"
Hence, this would select an element with class="eye" and id="left" which is
inside a div with class="face"
*/
div.face div.eye#left {
}
HTML:
<div class="face"> <!-- div.face -->
<div class="upper">
<div class="eye" id="left"></div> <!-- div.eye#left is selected -->
<div class="eye" id="right"></div>
</div>
</div>
Space () is a descendant selector, see documentation: http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
Long story short tag.class applies to a tag element with class class, whereas tag .class applies to any elements with class class that are within tag element.
Can you explain me css difference between a .someclass, .someclass a or something like, img .someclass and .someclass img?
a .someclass
Selects any (descendant of an 'a' tag) that has a class of 'someclass'
<a href="#example">
<span class="someclass">...</span>
</a>
While
.someclass a
Selects any (descendant of a tag with a class of 'someclass') that is an 'a' tag.
<div class="someclass">
...
</div>
And
a.someclass /* Note absence of spaces */
Selects any 'a' tag with a class of 'someclass'.
...
This is a descendant selector
a .someclass matches on elements with a class of someclass that are within an anchor element:
<a href="#example">
<span class="someclass">...</span><!-- this one is matched -->
</a>
.someclass a matches on anchors that are within elements with a class of someclass:
<span class="someclass">
...<!-- this one is matched -->
</span>
think of it like an order of operations as you move down through the dom tree. For example, a .someclass /* space in between */ would be applied to the following:
<a href="">
<span class="someclass"></span>
</a>
while .someclass a /* space in between */ would be applied to the following:
<div class="someclass">
</div>
a .someclass
will match this span:
<a><span class="someclass"></span></a>
--
.someclass a
will match this span:
<a class="someclass"><span></span></a>
--
or something like, img .someclass and .someclass img?
See above but swap the a tag for an img tag
a.first would select any tag with the class of first**
.first a would select any tag that is a child of an element with the class of "first"
The difference is the order applied. When there is a list of selectors separated by a space, it indicates a parent child relationship, where the former selector is the parent, and the latter is the child. This continues on down the chain if there are more than 2 selectors.
When you use
img .className { /* style rules */ }
it will look for all elements which have class="className" and are nested inside of an image tag. ( All .className which are children of img )
However, when you use
.className img { /* style rules */ }
it will look for all image tags which are nested inside of an element with class="className". ( All img which are children of .className )
If I have 3 divs at the same level ( not one in another ) . How can I change the color of the other div when hover one without using IDs and classes. I would like somthing like :
<div id="1" ></div>
<div></div>
<div></div>
And CSS :
#1 :hover < body > div
{
//Here I change the things
}
Use the general sibling combinator
#yourId:hover ~ div
{
color:red;
}
Also note that Id's must begin with a letter. W3 ID Attribute
Example
Put a wrapper around them, then put the hover on the wrapper.
<div class="wrapper">
<div class="element">foo</div>
<div class="element">bar</div>
<div class="element">baz</div>
</div>
.wrapper:hover .element {
color: red;
}
Example: http://jsfiddle.net/EB92r/