This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 years ago.
Is there any way using pure CSS(3) to select an element that is a preceding sibling of an element with a particular class?
i.e.:
html:
<div id='element-to-find'></div>
<div id='box1'></div>
<!-- a bunch more DOM elements between here --->
<div id='box2'>
<div id='inner-box'></div>
</div>
css:
#box1{ /*some styling*/ }
#box2{ /*some styling*/ }
#box2.active .....
Now, when #box2 has the class active I want to select and do something to the style of #element-to-find. Is there anyway to accomplish this?
There were multiple proposals to CSSWG in www-style#w3.org mailing list as for previous-sibling combinator: my one (2012), another 1, 2 (2013).
Common answer by Tab Atkins is like "we already have subject indicator for this". For selecting descendants of previous sibling (which would be trivial with previous-sibling combinator, e.g. .example - UL > LI), he suggests to use :matches() functional pseudoclass, e.g. :matches(!UL + .example) > LI. Both subject indicator and :matches() are currently in draft state and cannot be used in real world yet.
So you should add a regular class to the element-to-find element or (much less desired if your active class is added not via JS) use JavaScript to emulate previous-sibling-combinator functionality.
Without knowing any more of your selectors, you could potentially use CSS's :not() selector.
div:not(#box1), div:not(#box2) {
/*some style here*/
}
I would just suggest giving your #element-to-find a class as well when you select box2 and have a style ready for it.
Related
This question already has an answer here:
Is there a CSS selector for element without any class?
(1 answer)
Closed 4 years ago.
I am trying to target all instances of an h tag but only when it has no class.
For example:
<h1 class="class1">First</h1>
<h1 class="class2">Second</h1>
<h1>Third</h1>
In this instance I only want to target Third but not the others - I found an answer (Is there a CSS selector for element without any class?) which referred to [class=""] selector but that only seems to work on:
<h1 class="">Third</h1>
It is not practical to go through and list all the instances of classes and then reference them using :not so is there another way?
I accept that this is being made worse through the use of !important etc in the current CSS on some of the h1 classes but I have inherited this and I don't have the ability to start from scratch.
if you use h1: not ([class]) this tag search all.
If there are many !important you should use it in the new css and this new css place it at the end of all .css
Example:
<h1 class="class1">First</h1>
<h1>Second</h1>
<h1>Third</h1>
h1:not([class]) {
color: red;
}
This question already has answers here:
CSS3 selector :first-of-type with class name?
(10 answers)
CSS selector for first element with class
(23 answers)
Closed 7 years ago.
I have a lot of element in one div, for ex:
<div>
<p></p>
<span></span>
<div class="text"></div>
<span></span>
<div class="text"></div>
<div class="text"></div>
I want to select the first .text so I used .text:first-of-type but it doesn't work, only works for span:first-of-type
Can anybody show me how to select the first .text ?
You're doing this correctly. According to the definition:
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”
...and it should theoretically work in modern browsers. It works for me in the latest versions of Firefox, IE and Chrome
You're missing a closing </div> on the last line of your HTML sample - if this is also in your actual code, does fixing it help?
Is there another style rule somewhere that's overriding what you're trying to do? What happens if you change the rule to .text:first-of-type !important, which will force this rule to have higher priority?
Maybe if this is nested in other HTML you need to make the .text:first-of-type rule more specific? E.g. is the HTML nested within another element or class - in that case apply the rule by specifying that it applies to anything under that element or class e.g.
div .text:first-of-type {
color: red;
}
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 8 years ago.
This example shows in detail... The problem starts with:
.h:hover { background:red }
.h:hover ~ td { background:blue }
That works fine: the :hover event selector triggers the following-sibling td element. So, we can say that the ".h:hover triggers ~ td"... But, if the td element has a backward occurrence, there is no selection.
PS: note that the rolspan in the example causes a "layout with a td following-sibling" where structure have a td that is not following.
The only possibility is the #id selector. So, why does CSS not offer some operator or construction to use #id in that constraint?
SUB-QUESTION#1: is there any pure CSS solution?
(edit) Thanks #TylerH to show that sub-question#1 is not a duplicate (!).
The point here is the #id selector in a trigger-event context.
Why CSS3 or CSS4 or "?" standards are not using #id for this kind of application. Are there some standard about CSS events and a better control for manage them?
We know that there is no "previous sibling" selector, and this is an understandable problem with parse algorthims. But "find #id" algorithm (no matter if next or previous!) is so simple and so fast, there are no "parse problem" to adopt #id in a kind of "trigger selector".
SUB-QUESTION#2: there are a standardization iniciative (at CSS WG?) to do some workaround to the problem, using #id as triggered selector?
PS
The HTML label tag and for attibute deal with similar problem. A <label for="for"> not need Javascript to triggers (by click event) its correspondent <input type="checkbox" id="for"> checked... So, we can imagine an on-mouse-over correspondent event triggering in the same way,
label#from1:hover <OPERATOR> #for1 { ...do something... }
at a typical HTML form like this,
<div id="for1">
<input type="checkbox" id="mycheck"/>
<span></span>
</div><!-- tag input BEFORE tag label-->
<label id="from1" for="mycheck">Label for my styled "checkbox"</label>
The ~ selector is called the "general sibling" selector. This means it can only be used to select siblings of the appropriate element. In your case, the #c21 element does not have any siblings (brothers or sisters).
What you are asking for cannot be done with pure CSS, because it requires a parent selector (something like :has() from CSS Selectors Level 4). By "parent selector", I mean the ability to move backward up the DOM to an ancestor element, so that you can then move to the ancestor's sibling, and then to the ancestor's sibling's child element.
Think of it this way: the working selector is a boy selecting his sister. That is OK in CSS-land. However, the not-working selector is a boy trying to select his cousin. This is not OK in CSS-land, because it requires a parent selector. The boy would need to first select his parent, then his parent's brother, and then this parent's brother's son.
The fact that it is an ID rather than a class is irrelevant.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
Is there a way to write css so it would select a div above a selector you already known.
For example.
#modal .container .login{
//style
}
so the above code will look for an ID of modal > classname of container > classname of login.
And style the .login.
Now is is possible to have it go the reverse. So style the #modal only if it has a child of .login and .container
Thanks
Short answer? no. (in the current CSS spec) as already answered here.
Is there a CSS parent selector?
but, I can give you a little trick.
create a special CSS rule (a class) with your special styling for the 'parent'.
then, with JQuery, on document.ready, check for all the elements in the DOM who meets your requirement (in your case: has a child of some class), and dynamically add the special CSS class.
It's not a perfect solution, but can be helpful in some cases.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I'm looking to make a selector which will select all elements if they have a specific child element. For example, select all <div> with a child <span>.
Possible?
Is it possible to select an element if it contains a specific child element?
Unfortunately not yet.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
A Note About Specification Changes
This is a disclaimer about the accuracy of this post from this point onward. Parent selectors in CSS have been discussed for many years. As no consensus has been found, changes keep happening. I will attempt to keep this answer up-to-date, however be aware that there may be inaccuracies due to changes in the specifications.
An older "Selectors Level 4 Working Draft" described a feature which was the ability to specify the "subject" of a selector. This feature has been dropped and will not be available for CSS implementations.
The subject was going to be the element in the selector chain that would have styles applied to it.
Example HTML
<p><span>lorem</span> ipsum dolor sit amet</p>
<p>consecteture edipsing elit</p>
This selector would style the span element
p span {
color: red;
}
This selector would style the p element
!p span {
color: red;
}
A more recent "Selectors Level 4 Editor’s Draft" includes "The Relational Pseudo-class: :has()"
:has() would allow an author to select an element based on its contents. My understanding is it was chosen to provide compatibility with jQuery's custom :has() pseudo-selector*.
In any event, continuing the example from above, to select the p element that contains a span one could use:
p:has(span) {
color: red;
}
* This makes me wonder if jQuery had implemented selector subjects whether subjects would have remained in the specification.
Update December 2022 - Only Firefox is not supporting has()
The :has() pseudo-selector is proposed in the CSS Selectors 4 spec, and will address this use case once implemented.
To use it, we will write something like:
.foo > .bar:has(> .baz) { /* style here */ }
In a structure like:
<div class="foo">
<div class="bar">
<div class="baz">Baz!</div>
</div>
</div>
This CSS will target the .bar div - because it both has a parent .foo and from its position in the DOM, > .baz resolves to a valid element target.
Original Answer (left for historical purposes) - this portion is no longer accurate
For completeness, I wanted to point out that in the Selectors 4 specification (currently in proposal), this will become possible. Specifically, we will gain Subject Selectors, which will be used in the following format:
!div > span { /* style here */
The ! before the div selector indicates that it is the element to be styled, rather than the span. Unfortunately, no modern browsers (as of the time of this posting) have implemented this as part of their CSS support. There is, however, support via a JavaScript library called Sel, if you want to go down the path of exploration further.
I agree that it is not possible in general.
The only thing CSS3 can do (which helped in my case) is to select elements that have no children:
table td:empty
{
background-color: white;
}
Or have any children (including text):
table td:not(:empty)
{
background-color: white;
}