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.
Related
This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 3 years ago.
I have div named #mobile_div_111X222X333-99, 111X222X333 is question id which can change. I have lots of questions but I want to select every div that contains #mobile_div_{any_ID}-99 is it anyway to do that with css only?
Althought CSS does not support regular expression query selector, with your case, we can select div that has id attribute starts with mobile_div_ and ends with -99
div[id^="mobile_div_"][id$="-99"] {
// your style
}
We use two CSS3 selectors here:
^= starts with
$= ends with
Refs:
https://www.w3schools.com/cssref/sel_attr_begin.asp
https://www.w3schools.com/cssref/sel_attr_end.asp
You can use prefix attribute selectors with [x^=y], i.e. [id^=mobile_div_].
If that's not specific enough, you can stack a suffix attribute selector on top, using the syntax [x$=y], i.e. [id$=-99], for a complete selector of [id^=mobile_div_][id$=-99]. Note the lack of a space between the brackets.
You can use is like this -
HTML
<div id="abc-123">
<h1>helo</h1>
</div>
<div id="123-xyz">
<h1>helo</h1>
</div>
<div id="mobile_div_a-99">
<h1>helo</h1>
</div>
<div id="mobile_div_b-11">
<h1>helo</h1>
</div>
<div id="mobile_div_c-99">
<h1>helo</h1>
</div>
The (^) is used for "starting with" and ($) is used for "ending with".
[id^="abc"]{
color:blue;
}
[id$="xyz"]{
color:green;
}
[id^="mobile_div_"][id$='-99']{
background-color:red;
}
if id='abc-xyz', since CSS is Cascading Style Sheets (ie: top to bottom approach ) , the text color will be green.
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
In the following JSFiddle I have an example of attempting to not apply a style on an object that is inside a div with the class .k-grid.
In the given example the following line of code does not work as I expected.
As far as I understand CSS i'm saying: Every P object, that doesn't have the "fancy" class, and are not somewhere inside a div object with a .k-grid.
Since my given p object is inside a div with .k-grid, I dont expect it to turn green.. but it does.
<style>
form.editform div:not(.k-grid) p:not(.fancy) {
color: green;
}
</style>
<form class="editform">
<div>
<div class="k-grid">
<p>I am a paragraph.</p>
<p class="fancy">
<span class="notfancy">I am so very fancy!</span></p>
<div class="fancy">I am NOT a paragraph.</div>
</div>
</div>
</form>
When I change form.editform div:not(.k-grid) p:not(.fancy) to form.editform div:not(.k-grid)>p:not(.fancy) it does properly exclude the p fancy from becoming green.
Can someone explain to me why a space does not work in removing the class from the object, while the > does work? As well as explain what the difference is between "descendents" and "children".
Descendents are children, and descendents of children (e.g. grandchildren, grand-grandchildren, etc). Your <span> is a descendant of <form>, but not a child of it.
In no case is <div class="k-grid"> getting matched to div:not(.k-grid).
Your selector is picking up <form class="editform"> as its form.editform, its descendant (and incidentally a child) <div> for div:not(.k-grid), and its descendant (more precisely, grandchild) <p> for p:not(.fancy). You can check that this is what is going on by changing <div> to e.g. <article>, and seeing the CSS rule stop having an effect.
When you change the last part of your selector to child selector, <p> cannot match because it is a grandchild of <div>.
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.
This question already has answers here:
What does + mean in CSS? [duplicate]
(4 answers)
Closed 9 years ago.
What does the "+" symbol stand for in css style. What does the below code infer
#mainDiv label + a { }
It targets an a that follows a label nested within #mainDiv.
<div id="mainDiv">
<label></label>
<a>This element.</a>
</div>
+ means adjacent selector.
In your case it means if <a> tag is found directly after <label> tag inside the mainDiv then apply the css.
Example:
<div id="mainDiv">
<label>Label Text</label>
<a>Link</a> <!-- Your CSS will apply to this -->
</div>
It is Adjacent sibling combinator.
The adjacent sibling combinator is made of the "plus sign" (U+002B, +) 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 immediately precedes the element represented by the second one.
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.