Given the following (dynamic) markup, I need to match the second occurrence of the class orange, regardless of how many divs have the class apple.
<div>
<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div> <--
<div class="apple"></div>
</div>
Can it be done with CSS? Thanks.
You can use this with selectors level 3 to select those that aren't the first one :
.orange ~ .orange {
}
Demonstration
The best is to complete the style with a rule describing the other .orange elements :
.orange, .orange ~ .orange ~ .orange {
}
Demonstration
Select second instance of class in HTML like:
<div>
<ul>
<li class="classname">text</li>
<li>text</li>
...
<li>text</li>
<li class="classname">text</li>
<li>text</li>
</div>
Using this CSS (tested in Chrome).
div ul li.classname ~ .classname:not(.classname ~ .classname ~ .classname)
In this particular case :nth-child(2) or :nth-of-type(2) not works.
Related
I have a page full of elements. I simply just want to match the first element in my CSS selector.
I have tried sibling selector, first-child and first-of-type but they all only work in a structure where there are siblings. In my case I have different depths which makes it harder.
.match ~ .match {
background:red;
}
.match:first-child {
background: green;
}
.match:first-of-type {
background: yellow;
}
<div>
<ul>
<li>List item</li>
</ul>
<div>
<div class="match">Match - First match should be red</div>
</div>
<div class="match">Match</div>
<button></button>
<div>
<div>
<div class="match">Match</div>
</div>
</div>
</div>
It should find the first element with the class .match.
I will not accept answers like div > div > .match because then it does not find the element because we tell it where to look.
That is not possible with pure CSS. If the HTML is static, you can add an ID or another class, as Snake_py suggested. If you're okay with using a script, the document.querySelector method returns the first match of the selector, so you could do something like this: (see snippet)
document.querySelector('.match').classList.add('match-active')
.match-active {
background:red;
}
<div>
<ul>
<li>List item</li>
</ul>
<div>
<div class="match">Match - First match should be red</div>
</div>
<div class="match">Match</div>
<button></button>
<div>
<div>
<div class="match">Match</div>
</div>
</div>
</div>
I'm trying to style all elements inside a class while excluding a specific one and it's children. I've made several attempts using the :not() selector but I could not achieve what I want. Any thoughts?
<div class="orange">
<div>text</div>
<div>text</div>
<div>text</div>
<div>text</div>
<div class="list">
<ul>
<li> li text 1</li>
<li> li text 2 </li>
</ul>
</div>
</div>
Here is the link with the html and the styles.
https://stackblitz.com/edit/js-p7krtp?file=style.scss
Use ">" the child combinator:
.orange {
> :not(.list){
color: orange
}
}
This selects all children of .orange that do not have the .list class.
What best worked for me while trying to find a solution for this approach was trying it out in a fiddle. I find the accepted answer not exactly correct because the syntax should be:
.orange > :not(.list)
{
background-color: orange;
}
I can't seem to find an answer to this so either it's not possible or i'm not wording my searches correctly - i'm hoping someone on here can help? :)
I have some HTML (UL in my example) who's grand-parent (div) occasionally has a sibling and occasionally doesn't. An example of this might be :
No Sibling Example
<section>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</section>
Sibling Example
<section>
<div id="sibling1">xxx</div>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
<div id="sibling2">yyyy</div>
</section>
I want to select the UL element only when it's grandparent (div) has siblings.
I was going to use the preceding selector.. something like
section div div#item ~ ul
{
background: #ff0000;
}
but I cant seem to get it to work.
Any guidance greatly appreaciated!
section div~div div#item ul
{
background: #ff0000;
}
You need to select the parent div if it has a sibling. I'm not sure what your original selector was doing, but it was wrong.
Snippet with:
section div~div div#item ul
{
background: #ff0000;
}
<section>
<div id="sibling1">xxx</div>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
<div id="sibling2">yyyy</div>
</section>
Snippet without:
section div~div div#item ul
{
background: #ff0000;
}
<section>
<div>
<div id="item">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</section>
You can do this:
section>div:not(:only-child) ul{
background: red;
}
Here is a pen with two sections so you can see it works: http://codepen.io/vandervals/pen/qdqMvq
This has 2 advantages from the ~ method:
-It selects all ul from divs not only from one div.
-It is more readable.
I'm not surprised the CSS doesn't work, but I hope you get the idea. There are 2 lists and I'm trying to target the first letter of the first a in the first ul. In this example that's the B of Beauty Salons. Can I do this with CSS without changing the HTML?
CSS:
.tab-pane .category-headings ul:first-of-type a:first-of-type::first-letter {
margin-right: 1px;
padding: 0px 5px;
background-color: #666;
color: #fff;
font-weight: bold;
}
HTML:
<div class="tab-pane" id="b">
<div class="container-fluid category-headings">
<div class="row-fluid">
<div class="span11 offset1">
<div class="row-fluid">
<div class="span4">
<ul class="unstyled">
<li>Beauty Salons & Therapy
</li>
<li>Blinds
</li>
</ul>
</div>
<div class="span4">
<ul class="unstyled">
<li>Book Binders
</li>
<li>Bookkeeping Services
</li>
</ul>
</div>
<div class="span4">
<ul class="unstyled">
<li>Builders
</li>
<li>Building Plans
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
FIDDLE:
http://jsfiddle.net/a4644b8h/2/
It works if you set the <a> tag to be a block display element:
.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type::first-letter {
margin-right: 1px;
padding: 0px 5px;
background-color: #666;
color: #fff;
font-weight: bold;
}
.tab-pane .category-headings ul:first-of-type li:first-of-type a:first-of-type {
display: inline-block;
}
This is because the :first-letter selector will only apply to block elements, and not inline ones.
Here is an example fiddle.
First you need to change a few of those selectors. You aren't looking for ul:first-of-type. This will select the first ul inside each of the <div class="span4"> divs. Instead you want to target the first div with class="span4", like so:
.span4:first-of-type
Next, basically the same thing, you don't want to target a:first-of-type, this will select the first a tag in each of those li elements. Instead, target the first li, like so:
li:first-of-type
And then target the a tag inside that first li
So, to put all that together:
.tab-pane .category-headings .span4:first-of-type li:first-of-type a::first-letter {
}
Also, as Alan mentioned, the parent of the ::first-letter pseudo-element must be a block-level element, so add
.span4 a { /* make this selector as specific as you need it */
display: inline-block;
}
And that should do it. JSFiddle here
I have the following
CSS
.streamBox {
font-size:12px;
background-color:#EDEFF4;
border-bottom:1px solid #E5EAF1;
margin-top:2px;
padding:5px 5px 4px;
}
.streamBox:last-child {
border: none;
}
HTML
<ul id="activityStream">
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
<li class="story">
<div class="streamBox nobkgcolor" id="">
Stuff
</div>
</li>
</ul>
I thought the last-child selector would make it so the last DIV doesn't hav ea border... But instead all DIVs now don't have borders? y?
Suggestions on how w CSS to make it so JUST the last div doesn't have the border?
Thanks,
For updated question:
Your selector needs a tweak, it should be:
li:last-child .streamBox {
border: none;
}
The <div class="streamBox"> is both the first and last child of its parent, so your current selector matches all of them, instead you want the <div> inside the last <li>, so use the :last-child on the <li>, you can test it here (I changed the border to black to make it more obvious).
For previous question:
It's because you're missing a quote on the class="" attribute, fix it like this:
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
<div class="box">blah blah</div>
It'll then work as intended, the first 3 having borders, you can test it here.