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>.
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:
How do I select the "last child" with a specific class name in CSS? [duplicate]
(6 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
I'm dynamically adding and removing classes to and from elements on specific JS events. What I would like to do is select the last child element that has none these classes with CSS.
Example #1
<container-element>
<h2></h2>
<div class='some-class'></div>
<div></div>
<div></div> <!-- select this div -->
</container-element>
Example #2
<container-element>
<h2></h2>
<div></div>
<div></div> <!-- select this div -->
<div class='some-class'></div>
</container-element>
Is it possible to write a CSS selector to do this?
Something like container-element > div:not(.select):last-of-type?
Per this answer, the solution would technically be container-element > div:nth-last-child(1 of :not(.select)).
However, this of S clause in :nth-last-child is still not supported by any browser other than Safari.
You're saying: select the last sibling that doesn't contain a class attribute.
I don't believe it's possible with currently available CSS.
You're asking a waterfall (the cascade) to run upward. The browser needs to check the last element, then check the ones that came before it. This is not how CSS works.
div:not(.some-class):last-of-type won't work because the browser doesn't move up automatically to the next sibling.
Of course I can do this with JS, but preferred a pure CSS solution. Supposedly a pure CSS solution is not possible, so the next best thing is an CSS solution with a little extra HTML.
The trick was to add a class, not-selected, to all of the elements, then remove this class from the element that you want to target with the CSS selector.
And the CSS selector would be div:not([class*='not-selected']).
div:not([class*='not-selected']) {
background: red;
}
<button type='button'>
<h2>title</h2>
<div class='not-selected'>option one</div>
<div>option two</div>
<div class='not-selected'>option three</div>
</button>
This question already has answers here:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
I'm trying to target the div with class "text" inside the last div with class "done".
For example:
<div class="installSteps">
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Prep</div>
</div>
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Check</div> < trying to target this
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Configure</div>
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Go!</div>
</div>
</div>
I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:
.installSteps .done:last-child .text
Any way to do it?
EDIT: Adding some additional details...
The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)
So Im looking for a way of targeting the last instance of "done" wherever that may be...
Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...
Provided the hierarchy doesn't change, this works for me:
.installSteps div:nth-child(2) :last-child {
color:red;
}
jsFiddle example
If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.
You could do this
.installSteps .done:not(:first-child) .text {
color: red;
}
Will affect anything after first one.
JS Fiddle Demo
Try nth-child() applied to the .done class.
Example
.done:nth-child(2) .text{
background:red;
}
DEMO
http://jsfiddle.net/a_incarnati/ntzj5wte/
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.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Hi!
I'm trying to select a parent node of a specific node (with a specific className) to apply some CSS style to it.
As far as I know, there only exist CSS3 selector operands for child elements, descendant, following nodes etc... So only some "forward" selection in the DOM document is possible. When the selector applies to some section in the DOM document, always the last element the selector describes, is being selected. Am I wrong? I hope so!
How do you select the first <div> element in the following example? Let's say that there may exist a lot of other <div>s containing <p>s and I only want to select the <div>s containing a p.foo but not p.bar. Note that I want to select the <div> rather than the <p>!
<div>
<h1>Test</h1>
<p class="foo">Some text</p>
</div>
<div>
<h1>Test 2</h1>
<p class="bar">Some other text</p>
</div>
Thanks in advance!
Indeed a "parent selector" doesn't exist.
You can see the list of selectors here:
http://www.w3.org/TR/css3-selectors/#selectors
You could give your parent node an id and then select the parent with its id.
Otherwise I don't see any solution to access the div from bottom up using solely CSS.