This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 3 years ago.
I have div named #mobile_div_111X222X333-99, 111X222X333 is question id which can change. I have lots of questions but I want to select every div that contains #mobile_div_{any_ID}-99 is it anyway to do that with css only?
Althought CSS does not support regular expression query selector, with your case, we can select div that has id attribute starts with mobile_div_ and ends with -99
div[id^="mobile_div_"][id$="-99"] {
// your style
}
We use two CSS3 selectors here:
^= starts with
$= ends with
Refs:
https://www.w3schools.com/cssref/sel_attr_begin.asp
https://www.w3schools.com/cssref/sel_attr_end.asp
You can use prefix attribute selectors with [x^=y], i.e. [id^=mobile_div_].
If that's not specific enough, you can stack a suffix attribute selector on top, using the syntax [x$=y], i.e. [id$=-99], for a complete selector of [id^=mobile_div_][id$=-99]. Note the lack of a space between the brackets.
You can use is like this -
HTML
<div id="abc-123">
<h1>helo</h1>
</div>
<div id="123-xyz">
<h1>helo</h1>
</div>
<div id="mobile_div_a-99">
<h1>helo</h1>
</div>
<div id="mobile_div_b-11">
<h1>helo</h1>
</div>
<div id="mobile_div_c-99">
<h1>helo</h1>
</div>
The (^) is used for "starting with" and ($) is used for "ending with".
[id^="abc"]{
color:blue;
}
[id$="xyz"]{
color:green;
}
[id^="mobile_div_"][id$='-99']{
background-color:red;
}
if id='abc-xyz', since CSS is Cascading Style Sheets (ie: top to bottom approach ) , the text color will be green.
Related
This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
In the following JSFiddle I have an example of attempting to not apply a style on an object that is inside a div with the class .k-grid.
In the given example the following line of code does not work as I expected.
As far as I understand CSS i'm saying: Every P object, that doesn't have the "fancy" class, and are not somewhere inside a div object with a .k-grid.
Since my given p object is inside a div with .k-grid, I dont expect it to turn green.. but it does.
<style>
form.editform div:not(.k-grid) p:not(.fancy) {
color: green;
}
</style>
<form class="editform">
<div>
<div class="k-grid">
<p>I am a paragraph.</p>
<p class="fancy">
<span class="notfancy">I am so very fancy!</span></p>
<div class="fancy">I am NOT a paragraph.</div>
</div>
</div>
</form>
When I change form.editform div:not(.k-grid) p:not(.fancy) to form.editform div:not(.k-grid)>p:not(.fancy) it does properly exclude the p fancy from becoming green.
Can someone explain to me why a space does not work in removing the class from the object, while the > does work? As well as explain what the difference is between "descendents" and "children".
Descendents are children, and descendents of children (e.g. grandchildren, grand-grandchildren, etc). Your <span> is a descendant of <form>, but not a child of it.
In no case is <div class="k-grid"> getting matched to div:not(.k-grid).
Your selector is picking up <form class="editform"> as its form.editform, its descendant (and incidentally a child) <div> for div:not(.k-grid), and its descendant (more precisely, grandchild) <p> for p:not(.fancy). You can check that this is what is going on by changing <div> to e.g. <article>, and seeing the CSS rule stop having an effect.
When you change the last part of your selector to child selector, <p> cannot match because it is a grandchild of <div>.
This question already has answers here:
How do I select the "last child" with a specific class name in CSS? [duplicate]
(6 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 3 years ago.
I'm dynamically adding and removing classes to and from elements on specific JS events. What I would like to do is select the last child element that has none these classes with CSS.
Example #1
<container-element>
<h2></h2>
<div class='some-class'></div>
<div></div>
<div></div> <!-- select this div -->
</container-element>
Example #2
<container-element>
<h2></h2>
<div></div>
<div></div> <!-- select this div -->
<div class='some-class'></div>
</container-element>
Is it possible to write a CSS selector to do this?
Something like container-element > div:not(.select):last-of-type?
Per this answer, the solution would technically be container-element > div:nth-last-child(1 of :not(.select)).
However, this of S clause in :nth-last-child is still not supported by any browser other than Safari.
You're saying: select the last sibling that doesn't contain a class attribute.
I don't believe it's possible with currently available CSS.
You're asking a waterfall (the cascade) to run upward. The browser needs to check the last element, then check the ones that came before it. This is not how CSS works.
div:not(.some-class):last-of-type won't work because the browser doesn't move up automatically to the next sibling.
Of course I can do this with JS, but preferred a pure CSS solution. Supposedly a pure CSS solution is not possible, so the next best thing is an CSS solution with a little extra HTML.
The trick was to add a class, not-selected, to all of the elements, then remove this class from the element that you want to target with the CSS selector.
And the CSS selector would be div:not([class*='not-selected']).
div:not([class*='not-selected']) {
background: red;
}
<button type='button'>
<h2>title</h2>
<div class='not-selected'>option one</div>
<div>option two</div>
<div class='not-selected'>option three</div>
</button>
This question already has answers here:
How to get nth-child selector to skip hidden divs [duplicate]
(4 answers)
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
I'm making a table-like layout on page where I can remove rows. I only want the row labels to show when they are for the first row and so I have used the :first-of-type CSS selector to display them and then have hidden all the other labels else. A simplified version of the html roughly looks like this:
<div class="container">
<div class="row">
<label>Name</label>
<input></input>
</div>
<div class="row">
<label>Name</label>
<input></input>
</div>
</div>
And a simplified CSS like this:
.row label {
display:none;
}
.row:first-of-type label {
display:inline-block;
}
This works fine except when I set the first row to display:none it still considers the un-displayed row the first-of-type and so the labels don't show in the row that is displayed. This all uses JQuery and so I suppose I could dynamically add and remove a .first-row class but I was hoping for something more elegant using CSS. Any ideas? I don't think you can do a :not() selector based on a style value can you?
This question already has answers here:
Is there a CSS selector by class prefix?
(4 answers)
Closed 8 years ago.
I'm looking for a way in css to select any element with a class that matches the beginning of a string. I know about the [class*="string"] and [class^="string"] rules, but those aren't exactly what I'm looking for. ^= only matches the first class, so any preceding classes will break it. And *= looks for any part of the string, not just the beginning.
http://codepen.io/anon/pen/HiJjL
HTML:
<div class="asdf col-6">match</div>
<div class="col-6">match</div>
<div class="x-col-6">dont match</div>
CSS:
[class *= "col-"] {
color:red;
}
[class ^= "col-"] {
font-weight:bold;
}
The pen illustrates the problem. The first selector is too broad, the second is too narrow. Of course I can work around this by using *= and being careful with my other class names, but I was curious if this is possible.
CSS
span[id^='string_'] {}
HTML
<span id="string_example">string example</span>
I don't know off such a possibility, but I also think it is not the right way. A better solution would be to add multiple classes to the element.
<div class="asdf col col-6">match</div>
<div class="col col-6">match</div>
<div class="x-col-6">dont match</div>
This way, you can tell that that div is a 'col' (column?) and more specifically, it is a 'col-6'.
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 8 years ago.
I have to select particular word in div tag.
HTML
<div>This is my text</div>
Here i need a select the word my.
Is it possible to achieve with CSS alone?
HTML:
<div> This is <span id="myspan"> my </span> text </div>
CSS:
#myspan {
ENTER CSS HERE
}
there's no other chance (unless you change the span to any other tag)
No, you can't select inner text via css...
You should use some javascript code or add a class to the specific text container.
Check jquery :contains selector, for example:
http://api.jquery.com/contains-selector/