This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I've been battling to get this right...basically I have the following HTML setup:
<div class="box10">
<span class="label01">Name:</span>
<input class="tboxes" type="textbox" />
</div>
"span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus.
I have tried the following CSS code:
input.tboxes:focus span.label01 {
color:#FF9900;
...
}
but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA!
This is entirely possible through the use of sibling selectors.
input.tboxes:focus + span.label01 {
color:#FF9900;
...
}
This rule will apply to label01 whenever the input is focused.
However, this only works when the span is to the right of the input, so you'll have to switch the places of the elements. A quick "position:relative" on the div and "float: left" on the span will move them back in place though.
No – you can't do this with a CSS selector. Quote from Wikipedia:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that satisfies certain
criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated
stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for > parent selectors are related to browser performance and incremental rendering issues.
You could, however, do this with some simple JavaScript:
// with jQuery:
$('input.tboxes').focus(function() {
$(this).parent().find('span.label01').addClass('active');
});
Your selector at the moment is looking for a span inside an input. As far as I'm aware, what you're trying to do isn't really reliably possible with the current state of CSS selector support.
I'd be tempted to do it with a bit of jQuery like so:
$("input.tboxes").focus(function() {
$(this)
.parent("div:first")
.addClass("focussed")
.find("span")
.addClass("focussed");
});
That should do what you're wanting to do if you then set styling for .label01.focussed and .box10.focussed.
Related
This question already has an answer here:
Difference in applying CSS to html, body, and the universal selector *?
(1 answer)
Closed 3 years ago.
I would like to ask what is the difference between *{} and body,html{}. It changes the view in the html and I want to have a broad knowledge about this. Thanks.
The wildcard (*) will apply the styling to every element found on your HTML page unless you give specific styling for that element. It overrides any possible inheritance for the set property because it is setting that default value for each individual element. If you want to change something in a section that has child elements then you will have to make that change for each child. This can be useful in a few cases (box-sizing is probably the most common use) but most of the time you will not want to use this. Depending on how heavily this is used, it can slow down your page load times.
Setting the styling with body/html allows for inheritance to still take place. Elements within the html/body will still show the styling found here if their default is set to inherit. This will still allow a closer parent to the child to override the styling. In CSS, the best option is to be more specific.
The *{} selector (Universal selectors) matches elements of any type. (MDN).
body,html{} select body and html elements.
Consider the following example:
* { /* Selects all elements */
color: blue;
}
html,
body { /* Selects html and body element */
color: green;
}
<html>
<body>Body</body>
<footer>footer</footer>
</html>
*{}
is a universal selector. It will implement the styling of all the elements. If you want to do some changes with styling of the particular element then you have to override it.
body,html{}
will do the same for you. But there is one scenario. If you want to inherit the properties from the parent then body,html{} is definitely going to play this role. It is used for the inheritance of properties
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
Is there a way to make a CSS Selector that matches the following?
All OBJECT elements
which have a PARAM element inside of them
The selector
OBJECT PARAM
doesn't work, as it matches the PARAM, not the OBJECT. I'd like to apply { display:none } to the objects; it's useless to apply that to the PARAMs.
(I'm aware I could pull this off with jQuery - $("object param").closest("object") - and VanillaJS - document.querySelector("object param").closest("object") - but I'm trying to create CSS rules on a page.)
To select all OBJECT containing PARAM, in CSS:
OBJECT:has(PARAM)
To select all OBJECT having a direct child PARAM, in CSS:
OBJECT:has(> PARAM)
No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child
Only thing that comes even close is the :contains pseudo class in CSS3, but that only selects textual content, not tags or elements, so you're out of luck.
A simpler way to select a parent with specific children in jQuery can be written as (with :has()):
$('#parent:has(#child)');
Is there any way you could programatically apply a class to the object?
<object class="hasparams">
then do
object.hasparams
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:
CSS selector based on element text? [duplicate]
(3 answers)
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 9 years ago.
Get Here
I need to hide above link by using css (display:none).How can I select that (i.e. link with 'Get Here' text)
It isn't possible to target an element based on its content. but, it is possible to target an href based on its link:
Get Here
a[href="go/there.html"]{}
If you can have a value other than # in your href, this approach could work.
No, not possible for css. Css is made for styling elements, not selecting texts. You can do it with jquery though:
$("a:contains('Get Here')").hide();
Not with CSS, but using jQuery:
$("a:contains('Get Here')").hide();
or
$("a:contains('Get Here')").css('display','none');
You can't do that with CSS. But even if you could, you shouldn't have done it, really. Never. Even forget about using javascript for this (if it was up to me I would exclude :contains filter from jQuery). This is very-very bad approach to style things. Because tomorrow you change the link text and your code breaks. What you really need to do is to use classes:
Get Here
with the next CSS:
.get-here {
display: none;
}
If you need to do it automatically whenever that text appears (and you don't have control over the text), use jQuery as asku suggests.
If you have control over the text, it's much simpler to add a class to that link and style it. You can add the same class to all the links that need hiding.
HTML:
Get Here
CSS:
.hide {display: none}
With CSS3 you could also use a[rel="#"] {display:none}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
Is there a way to make a CSS Selector that matches the following?
All OBJECT elements
which have a PARAM element inside of them
The selector
OBJECT PARAM
doesn't work, as it matches the PARAM, not the OBJECT. I'd like to apply { display:none } to the objects; it's useless to apply that to the PARAMs.
(I'm aware I could pull this off with jQuery - $("object param").closest("object") - and VanillaJS - document.querySelector("object param").closest("object") - but I'm trying to create CSS rules on a page.)
To select all OBJECT containing PARAM, in CSS:
OBJECT:has(PARAM)
To select all OBJECT having a direct child PARAM, in CSS:
OBJECT:has(> PARAM)
No, what you are looking for would be called a parent selector. CSS has none; they have been proposed multiple times but I know of no existing or forthcoming standard including them. You are correct that you would need to use something like jQuery or use additional class annotations to achieve the effect you want.
Here are some similar questions with similar results:
Is there a CSS parent selector?
CSS Parent/Ancestor Selector
Complex CSS selector for parent of active child
Only thing that comes even close is the :contains pseudo class in CSS3, but that only selects textual content, not tags or elements, so you're out of luck.
A simpler way to select a parent with specific children in jQuery can be written as (with :has()):
$('#parent:has(#child)');
Is there any way you could programatically apply a class to the object?
<object class="hasparams">
then do
object.hasparams