This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How do I select the “last child” with a specific class name in CSS?
As the title says, i want to adress css rules to the last element of a certain type which has a certain class. The following code works perfectly:
div:last-of-type { margin-right:0; }
but i want something like
div.class:last-of-type { margin-right:0; }
How to do this ?
Unfortunately finding the last .class is not possible with last-of-type.
Edit:
To actually add something constructive to this answer, you could fallback to JavaScript to locate this selector, or revise your markup/CSS. Whilst I have found myself in the situation that last-of-type for a class selector would be useful, it's nothing that cannot be worked around with a little more thought.
Make the nomargin a css class, and you can change it easily:
var items = document.getElementsByClassName('nomargin');
items[items.length-1].style.color = 'black';
items[items.length-1].style.background = 'white';
or if that doesn't have enough jQuery, you can use:
jQuery('div.nomargin:last').css({
color:'black',
background:'white'})
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:
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:
Closed 10 years ago.
Possible Duplicate:
How do I select the “last child” with a specific class name in CSS?
As the title says, i want to adress css rules to the last element of a certain type which has a certain class. The following code works perfectly:
div:last-of-type { margin-right:0; }
but i want something like
div.class:last-of-type { margin-right:0; }
How to do this ?
Unfortunately finding the last .class is not possible with last-of-type.
Edit:
To actually add something constructive to this answer, you could fallback to JavaScript to locate this selector, or revise your markup/CSS. Whilst I have found myself in the situation that last-of-type for a class selector would be useful, it's nothing that cannot be worked around with a little more thought.
Make the nomargin a css class, and you can change it easily:
var items = document.getElementsByClassName('nomargin');
items[items.length-1].style.color = 'black';
items[items.length-1].style.background = 'white';
or if that doesn't have enough jQuery, you can use:
jQuery('div.nomargin:last').css({
color:'black',
background:'white'})
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.