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}
Related
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:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 7 years ago.
Let's say you have a form input button that you want to style with CSS, but you also want to use "::before" to append text before the styling. How would you do that? Is that even possible?
input[type=submit]::before {} (this doesn't work)
Is editing "value='blahblahbuttontext'" in the form the only way to achieve this?
Thanks,
-- MP
No, pseudo elements don't work on inputs. You can achieve such an effect using javascript, or you can use pure CSS but you will need to replace the input with a button.
[type="submit"]:before{
content: "blahblah";
}
<button type="submit">buttontext</button>
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:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 7 years ago.
I would like to apply a different style to all anchors containing a specific word. Can it be done in pure CSS? It's ok if it's CSS3-only.
No. :contains was once proposed but is not in the current Working Draft of CSS3 Selectors.
You would need some JavaScript, for example:
for (var i= document.links.length; i-->0;)
if (/\bSpecificWord\b/i.test(document.links[i].innerHTML)
document.links[i].style.color= 'red';
You can match attribute values though. If you use custom data attributes, it might get what you want.
yes there is a :contains selector in CSS3.
li:contains("special"){text-style: italic;}
it is mentioned about 1/2 down this page here
This is something you can also do with jQuery too ...
#bobince help me and I wrote this code:
var x = document.getElementsByTagName('TD');
for (var i= x.length; i-->0;)
if (x[i].innerHTML=='closed')
x[i].parentNode.style.background= '#FEE';
If the content of some TD is 'closed' then the background color of the TR will be identified with light red color.
Use the Hitch which is a tiny JS library. You can easily apply content based style to any element. It has lots of options and great for conditional styling.
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.