For instance, div > p can be used to select all <p> elements that are direct children of a <div> element. Is it valid to use div > p > span to select a <span> elements that has a <p> parent and a <div> grandparent?
What about other operators in CSS selectors? Is it valid to use '+' in div + p + span or ',' in div, p, span?
How about combining different selectors? Like div + p > span?
Note that Selectors doesn't use the term "operator". The > and + symbols are more accurately known as combinators, while the comma is merely a symbol used to group selectors into a list, and doesn't belong in the same category as the > and + combinators.
As of Selectors level 4, combinators define a relationship between two elements, so they are indeed binary. And you can indeed use > or + multiple times in succession to refer to grandparents or other adjacent siblings. For example, div > p > span represents the following HTML fragment:
<div>
<p>
<span></span>
</p>
</div>
And div + p + span represents the following fragment:
<div></div>
<p></p>
<span></span>
You can also mix and match combinators to represent even more complex structures. For example, div + p > span represents a <span> whose parent is a <p> which in turn directly follows a <div>, as given by the following fragment:
<div></div>
<p>
<span></span>
</p>
Switching the combinators around, div > p + span represents a <span> that directly follows a <p> which in turn is a child of a <div>:
<div>
<p></p>
<span></span>
</div>
Notice how this implies that both the <span> and the <p> are children of the same <div>.
Keep in mind though that every complex selector targets the rightmost element (known as the subject of the selector). Unfortunately, this coupled with combinators being binary means that not all structures can be represented. See my answer to this question for an extremely in-depth explanation of both of these concepts and why such a limitation arises as a result.
You can also use , multiple times to group as many selectors together as you like, but again this is separate from the notion of combinators. The difference is that combinators link elements together to form a complex selector representing a singular cohesive structure, whereas the comma groups multiple complex selectors into a single CSS rule for the sake of convenience.
Related
I'm trying to get :first-of-type to work for the <strong> HTML element but it won't work.
There can be numerous (random number and placement, but within p tags) <strong> elements but I want the first one to have different text color than the rest.
Here I would expect Hello 1 to be blue and Hello 2 + Hello 3 to be yellow. But they're all blue.
.yolo p strong { color:yellow; }
.yolo p strong:first-of-type { color:blue; }
<div class="yolo">
<p>bla bla</p>
<p><strong>Hello 1</strong></p>
<p>bla bla</p>
<p><strong>Hello 2</strong></p>
<p>bla bla</p>
<p>bla bla</p>
<p><strong>Hello 3</strong></p>
</div>
JS fiddle
Any ideas?
Solution doesn't have to include :first-of-type as long as the HTML remains unchanged.
As mentioned, each <strong> element is the first of its element type in its own parent <p>, therefore both elements match the :first-of-type pseudo-class.
Unfortunately, in this case, you may be stuck. Since the first <strong> element may not necessarily appear in the first <p> element as shown in your markup, you won't be able to use something like .yolo p:first-of-type strong to target the first <strong>. Neither is there a way using CSS to target just the first element in such a structure, since the existing structural pseudo-classes only match the nth element among its siblings, and there is no parent selector so you can't write a selector finding "the first <p> element that contains a <strong> element".
Since your markup is produced by a CMS, you will have to either
tell the CMS to apply a class name either to the first paragraph containing a <strong> element or to the first <strong> element, or
use JavaScript to apply the class name if the behavior of the CMS cannot be modified
then target this class.
From css-tricks:
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
This means that this will work:
<div class="yolo">
<p><strong>Strong 1</strong>
<br>
<strong>Strong 2</strong></p>
</div>
But this wont:
<div class="yolo">
<p><strong>Strong 1</strong></p>
<p><strong>Strong 2</strong></p>
</div>
Because in the second example each of the <strong> is the first in its <p> container. But in the first example, the two <strong> tags are both in the same <p> container, so Strong 1 goes blue, being the first one in the paragraph, and Strong 2 goes yellow, not being the the first in the paragraph.
I would like to know how to select first-child in actual scope, let me give you an example so you could understand my question correctly:
HTML:
<div class="comment commentCompany">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level two comment.
<div class="comment">
<div class="commentTop"></div>
<div class="commentMiddle">
Text of comment level three.
</div>
<div class="commentBottom"></div>
</div>
</div>
<div class="commentBottom"></div>
</div>
CSS that first came to my mind to affect classes commentTop, commentMiddle, commentBottom inside the commentCompany class but only in a direct scope was this:
.commentCompany .commentTop:first-child{/*affect company's .commentTop*/}
.commentCompany .commentMiddle:first-child{/*affect company's .commentMiddle*/}
.commentCompany .commentBottom:first-child{/*affect company's .commentBottom*/}
But there are two problems: :first-child is more like first class's element's type(not really a first-child of class) (would have to use nth-child), and the main problem : it affects also the nested comment - which is not company's comment - so how to get only the direct scope of commentCompany?
I would like to know CSS2 && CSS3 solution if there is any difference. Thanks! :)
You want the child combinator >, not the :first-child or :nth-child() pseudo-classes:
.commentCompany > .commentTop
.commentCompany > .commentMiddle
.commentCompany > .commentBottom
This only selects .commentTop, .commentMiddle and .commentBottom that are directly nested within .commentCompany (within your so-called "actual scope"). See this answer for an illustration.
Using the space, the descendant combinator, means you're trying to get every first child of its parent that is nested within .commentCompany. Combine that with your class selectors and you get all kinds of unexpected results.
The child combinator is part of CSS2; there is no CSS3-only solution.
Not sure if this is doable in css but what I was wanting to do is
Say, you have your html structure like below:-
<h4>Title <span class="specific"> text </span> </h4>
<div>
<p> This is some text. </p>
</div>
Now, I want to style the div p elements but I want to use h4 span.specific as a relation for div p element.
Using parenthesis, it might look like this. (h4 span.specific) ~ (div p)
Just wanted to know if this can be done with only CSS.
Unfortunately not, selectors consists of relations between single elements (+ pseudo-classes). You would like to have relations between selectors, which isn't possible as today and won't be in CSS4.
The problem is that if you traversed down in the DOM tree using CSS, there's simply no way to traverse up (apart from the Determining the subject of a selector selector !), so one cannot create such relation.
In order to fix this you must be able to recognize the h4 > span.specific without looking at the span, for example apply the class on the h4 instead.
References:
http://dev.w3.org/csswg/selectors4/#overview
http://www.w3.org/TR/css3-selectors/#selectors
Parenthesis is not valid CSS selector operator.
The sequence of selectors and combinators is read from right to left.
<h4 class="specificParent">Title <span class="specific"> text </span> </h4>
<div>
<p> This is some text. </p>
</div>
CSS:
h4.specificParent~div>p {
background-color: red;
}
It interprets the above statement as
Select an p element
that has parent div
that is sibling of h4 which has specificParent class
Please find the working demo here: Demo
you can only achieve this by this
i cant find any other solution for this
http://jsfiddle.net/8QBkz/
h4 ~ div p{
color:green
}
CSS is really powerful and will help you to do so.
Instead of (h4 span.specific) ~ (div p), use
h4 > span.specific + div > p
Hope that helps.
Edit:
you cannot specify span.specific, however you can say a p inside a div followed by an h4, i.e
h4 + div > p.
Apologies for the confusion.
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Closed 9 years ago.
I want to know what does (~) mean in css.
#img1:hover ~ #img2 {
opacity: 0;
}
In visual studio, i get 'unexpected character sequence' error when i use this symbol. what is the actual meaning of this in CSS. what does it do?
http://www.w3.org/TR/selectors/
8.3.2. General sibling combinator
The general sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in the
document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.
example
h1 ~ pre
matches that <pre> here:
<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>
There is also + selector, for adjacent sibling combinator: with h1 + pre the <pre> tag would have to be right after <h1>
It applies the style to all elements matching the second selector if they appear after the elements matching the first selector. For example, given an HTML snippet and CSS rule:
hr ~ p {
font-weight: bold;
}
<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>
only <p>Line two</p> and <p>Line three</p> will appear bold. In your example, I think Visual Studio is having a problem interpreting the :hover modifier, since it isn't really an element. If you remove it from the rule, it may work correctly.
For instance, div > p can be used to select all <p> elements that are direct children of a <div> element. Is it valid to use div > p > span to select a <span> elements that has a <p> parent and a <div> grandparent?
What about other operators in CSS selectors? Is it valid to use '+' in div + p + span or ',' in div, p, span?
How about combining different selectors? Like div + p > span?
Note that Selectors doesn't use the term "operator". The > and + symbols are more accurately known as combinators, while the comma is merely a symbol used to group selectors into a list, and doesn't belong in the same category as the > and + combinators.
As of Selectors level 4, combinators define a relationship between two elements, so they are indeed binary. And you can indeed use > or + multiple times in succession to refer to grandparents or other adjacent siblings. For example, div > p > span represents the following HTML fragment:
<div>
<p>
<span></span>
</p>
</div>
And div + p + span represents the following fragment:
<div></div>
<p></p>
<span></span>
You can also mix and match combinators to represent even more complex structures. For example, div + p > span represents a <span> whose parent is a <p> which in turn directly follows a <div>, as given by the following fragment:
<div></div>
<p>
<span></span>
</p>
Switching the combinators around, div > p + span represents a <span> that directly follows a <p> which in turn is a child of a <div>:
<div>
<p></p>
<span></span>
</div>
Notice how this implies that both the <span> and the <p> are children of the same <div>.
Keep in mind though that every complex selector targets the rightmost element (known as the subject of the selector). Unfortunately, this coupled with combinators being binary means that not all structures can be represented. See my answer to this question for an extremely in-depth explanation of both of these concepts and why such a limitation arises as a result.
You can also use , multiple times to group as many selectors together as you like, but again this is separate from the notion of combinators. The difference is that combinators link elements together to form a complex selector representing a singular cohesive structure, whereas the comma groups multiple complex selectors into a single CSS rule for the sake of convenience.