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'.
Related
This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 1 year ago.
I wrote a css selector that doesn't work. I want to understand why.
The following html:
<div class="container">
<br>
<br>
<p id="copyright">...</p>
</div>
I wrote the expression:
div[class='container']>br:last-child
Because i read that:
x:last-child selects all last-child x elements.
So why this expression returns nothing?
The last child of div[class='container'] node is <p id="copyright">...</p> element.
To select last br child you need to use :last-of-type, something like this:
div[class='container']>br:last-of-type
In your sample p is the last child. Here it's colored in red:
div[class='container'] p:last-child{
color: red
}
<div class="container">
<br>
<br>
<p id="copyright">test</p>
</div>
You likely aren't seeing any styles being applied because br tags are extremely limited in styling options. br tags simply generate a line break. So there's not really any content or dimension to them to style.
To show your selector is working, you can target the p tag instead of the br tag and you'll see the styles apply just fine. So change to div[class='container']>p:last-child. This is technically verbose as you could just as easily use this selector: .container p:last-child which is much more readable and clear. Just fyi.
I hope that gets you unstuck and moving towards a solution. Let me know if I've missed something.
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.
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:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
I'm trying to target the div with class "text" inside the last div with class "done".
For example:
<div class="installSteps">
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Prep</div>
</div>
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Check</div> < trying to target this
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Configure</div>
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Go!</div>
</div>
</div>
I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:
.installSteps .done:last-child .text
Any way to do it?
EDIT: Adding some additional details...
The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)
So Im looking for a way of targeting the last instance of "done" wherever that may be...
Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...
Provided the hierarchy doesn't change, this works for me:
.installSteps div:nth-child(2) :last-child {
color:red;
}
jsFiddle example
If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.
You could do this
.installSteps .done:not(:first-child) .text {
color: red;
}
Will affect anything after first one.
JS Fiddle Demo
Try nth-child() applied to the .done class.
Example
.done:nth-child(2) .text{
background:red;
}
DEMO
http://jsfiddle.net/a_incarnati/ntzj5wte/