So I just read that I can target previous sibling elements with the :has(+ ) pseudo-class.
I went and did implement the following rule. Unfortunately, this is not working. Am I wissing somethin?
p {
margin: 2rem;
}
p:has(a[class*="link--button"]):has( + p:has(a[class*="link--button"])) {
margin-bottom: 0;
}
<div>
<p>
<a class="link--button" href="#">first link</a>
</p>
<p>
<a class="link--button" href="#">second link</a>
</p>
</div>
You may also find the code in jsfiddle
Here is also another article The CSS :has() selector is way more than a “Parent Selector mentioning it
The :has() pseudo-class cannot be nested;
However. I think p:has(a[class*="link--button"]):has(+ p a[class*="link--button"]) meets what you're trying to do.
Note that using margin-bottom results in an unclear test, because the bottom margin of the first p element will collapse with the top margin of the second p element anyway.
So I've added a color declaration to show that the selector is working.
p {
margin: 2rem;
color:red;
}
p:has(a[class*="link--button"]):has(+ p a[class*="link--button"]) {
margin-bottom: 0;
color:green;
}
a {
color:inherit
}
<div>
<p>
<a class="link--button" href="#">first link</a>
</p>
<p>
<a class="link--button" href="#">second link</a>
</p>
</div>
Related
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'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
is there any way to select last appear of a specific element with css?
this is an example: DEMO
i tried last-child but this is not what i want. i used this class:
HTML:
<ul>
<li><span>test</span></li>
<li>
<span>test</span>
<span>test</span>
</li>
</ul>
<div>
<span>test</span>
<span>test</span>
</div>
<p>
<span>test</span>
<span>red</span>
</p>
CSS:
span:last-child{
color:red;
font-weight:bold;
}
i want the last span with "red" content to be red. how i can do it with css ?
update:
there is a solution with last-of-type for elements with same parents. but what about different parents ?
Try this: (you should be aware of the parent wrapper element)
body > *:last-child > span:last-child{
color: red;
}
Working Fiddle
I have a list of items which I am trying to add dividers to right of each using the :before psuedo element.
Unfortunately, it seems like when I use it in combination with both last-child and first-child, it targets every element in the list.
Example - http://codepen.io/anon/pen/rupqi
Markup
<ul class="nav nav--inline nav--secondary">
<li><a class="nav--secondary__item" href="#">Site Map</a> </li>
<li><a class="nav--secondary__item" href="#" title="Search Terms">Search Terms</a> </li>
<li><a class="nav--secondary__item" href="#" title="Advanced Search">Advanced Search</a> </li>
<li><a class="nav--secondary__item" href="#" title="Contact Us">Contact Us</a> </li>
</ul>
CSS
.nav--inline, .nav--inline > li, .nav--inline > li > a { float: left; }
.nav--secondary__item {
color: #706782;
font-size: 1.2em;
padding: 0.8em;
position: relative;
#include transition (background-color 0.5s ease-in-out);
}
.nav--secondary__item:before {
content: "|";
color: #939EB7;
position: absolute;
left: 0;
}
.nav--secondary__item:first-child:before, .nav--secondary__item:last-child:before { content: "*"; }
Does anyone know why this happens, and if so, how to fix it?
Change your css to :
li:first-child .nav--secondary__item:before,
li:last-child .nav--secondary__item:before {
content:"*";
}
Because .nav--secondary__item is first-child as well as last-child of its parent li, following selector applies the content to all of them.
.nav--secondary__item:first-child:before,
.nav--secondary__item:last-child:before
{ content: "*"; }
Fiddle
:first-child pseudoclass selects the first child of its parent, similarly :last-child.
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
See doc
This is happening because you have a elements inside li elements and you are applying first-child to those a elements.
So .nav--secondary__item:first-child applies to every .nav--secondary__item, because the parents for each a are the surrounding li, not your ul.
Going by your class naming scheme, you can change your HTML to look like this:
<li class="nav--secondary__item">
<a class="nav--secondary__item__link" href="#" title="Site Map">Site Map</a>
</li>
And your CSS for the first-child/last-child will need a slight tweak:
.nav--secondary__item:first-child .nav--secondary__item__link:before,
.nav--secondary__item:last-child .nav--secondary__item__link:before {
content: "*";
}
You will also have to make the styles that apply to the a element use the .nav--secondary__item__link class instead.
Example forked from yours: http://codepen.io/anon/pen/rknmL
I have this html code:
<div class='ui'>
<h3 class='title'>
<a href='#'>Link to Header</a>
</h3>
</div>
<a href='#'>Another link</a>
I want to set a CSS style for all anchors a, but not the one that are into an h3 element that is parent of div.ui. I cannot add a class to the anchor a into h3 element.
I try this one:
a:not(:parent:parent.ui){color:#dedede;}
but this not work.
Any solution?
As Kobi noted in a comment, there is no such :parent selector.
Instead I suggest you style all a tags, then style a tags within h3 tags within a different rule:
a {
color: #dedede;
}
.ui h3 a {
color: another color;
}