This question already has answers here:
What is this CSS selector? [class*="span"]
(5 answers)
Closed 9 years ago.
I was looking at the Twitter Bootstrap 2 CSS file and saw [class*="span"]. What does it do, and what is the name of that method?
That's the CSS attribute selector. It selects elements containing span in their class attribute.
For e.g.
<div class="myclass span-12"></div>
You could select the above element by
[class*="span"]
CSS Attribute Selector
That is a CSS attribute selector, which follows the syntax [attribute*="value"] where
"attribute" is an HTML element attribute (i.e. class) and "value" is contained somewhere within the attribute string.
Your example is a CSS selector that will match any HTML element where the string "span" is contained within the element's class name string.
For more information on CSS attribute selectors, see the following article from CSS-Tricks: http://css-tricks.com/attribute-selectors/
It means that any element that has a class and the word span is present in the class name, i.e.
<div class='span-1'></div>
<div class='my-span'></div>
[class*="span"] will select all above and more tthat contains the word span. Read more.
Related
This question already has answers here:
Multiple descendant children selector with css [duplicate]
(3 answers)
Closed 3 years ago.
Codepen example is here.
Question. How do I paint yellow all inputs that are NOT descendants of div.b?
My attempt paints all three elements yellow:
:not(.b) input.myInp {background:yellow}
Thanks!
:not(.b) > div > p input.myInp {background:yellow}
You need to make the selector specific enough that it does not match with the parent .a element.
Your selector is not working because you're targeting any element that does not have the class .b but has an <input> descendant, and since the input has two ancestor elements which don't have this class the rule applies to them as well.
You should just specify that you're referring to the container's themselves by including the parent in your selector:
div.a > :not(.b) input.myInp {background:yellow}
This question already has answers here:
Target first element of DIV using CSS
(4 answers)
Closed 4 years ago.
How can I target a element with a class only if it is the first element under the body tag, and then not style any other elements with the same class on the same page?
You can target an element as direct child of the body only if it's both the first-child and with a specific class name
body > .yourclass:first-child {
...
}
:first-child matches a specific element, regardless of its class name but in this case the class must be also chained. All other elements with that class name won't be styled.
Codepen demo
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:
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 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