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;
}
Related
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>
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;
}
So nothing happens when I try to color list items in an unordered list using the general sibling combinator:
http://jsfiddle.net/bkbehpv0/
p {
color: blue
}
h1 ~ li {
color: red;
}
<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy </p>
<ul>My list
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
But a span inside of a paragraph colors with no problems at all:
http://jsfiddle.net/93khsvbn/
p {
color: blue
}
h1 ~ p span {
color: red;
}
<h1> Title of site </h1>
<p> Text in the site </p>
<p> Second paragraphy <span> heyo </span></p>
<ul>My list
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Sooo... is the span on equal footing with the paragraph when it comes to inheritance even though it's nested inside of the paragraph? Why?
I can't seem to find a thorough source from which I could learn about inheritance.
Also, just as an aside... how do I style the title of an unordered list without styling the list items? Do I HAVE to assign an identifier to the ul?
If I style the ul the list items will inherit that styling as well.
In your first example (h1 ~ li) you are saying:Find any li which are siblings to and preceded by a h1. As the li belong to a ul this rule is not matched.
The second example (h1 ~ p span) you are saying:Find any spans which are children to p which is a sibling to and preceded by a h1. So the rule is matched.
To get the first rule to match you should instead use h1 ~ ul li. This effectively says:Find any lis which are children to ul which is a sibling to and preceded by a h1.
p {
color: blue
}
h1 ~ ul li {
color: red;
}
<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
It should also be noted that the text "My List" is not valid in the ul, it should be surrounded by li tags. To differentiate it from the other li you could either:
Add a class: <li class="heading">My List</li>
Move it outside the list: <h2>My List</h2><ul>
Use the first-child selector: li:first-child {color:green;}
p {
color: blue
}
li:first-child {
color:green;
}
h1 ~ ul li {
color: red;
}
<h1> Title of site </h1>
<p>Text in the site</p>
<p>Second paragraphy <span> heyo </span></p>
<ul>
<li>My List</li>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
First of all, as Joshua K said, the <h1> is sibling (meaning in the same dom level) as <ul>. So as said, you can access a sibling's children like this
h1 ~ ul > li
I don't know if there is a complete inheritance guide but you can read about CSS selectors here and consequently learn about the dom inheritance and element relations.
As for your final question, there is no header in a <ul>. In your example "My list" is just plain text. You can style it with two ways.
1) (the bad way) style the whole <ul> and the overide the attributes in the <li> elements.
2) wrap your title around an element e.g. <span>My List</span> and apply style in ul>span
Can anyone see what I am doing wrong here?
I have some text elements inside an <a> which I want text-decoration:none on when the <a> is hovered over. See HTML below, which I believe should work, but when I mouseover that <a> the text is still underlining child <h2> and <p>.
HTML
<a href="" class="link-box">
<div>
<span class="icon-stat"><i class="fa fa-users"></i></span>
<h2>Membership Management</h2>
<p>Some text here</p>
</div>
</a>
CSS
a.link-box:HOVER h2, a.link-box:HOVER p {
text-decoration: none;
}
a:hover{
text-decoration: none;
}
Try it
http://jsfiddle.net/L3pxr0tx/
Say, we have this code:
<div>
<ul>
<li></li>
</ul>
</div>
What is the difference between <style>div ul li { ... }</style> and <style>div > ul > li { ... }</style>?
The space is a descendant selector. It will apply styles to all matching descendants (children, grandchildren, great-grandchildren...)
The > is a child selector. It will only apply to children of the parent.
Let's use this HTML as an example:
<section class=foo>
<div class=blue>
<span class=blue></span>
</div>
</section>
Let's style it with the descendant selector:
.foo .blue {
color: blue;
}
With the above CSS, both the div and the span will be blue. In fact, any element inside .foo will turn blue if you give it the class "blue".
Now look at this CSS:
.foo > .blue {
color: blue;
}
With this CSS, only the div will be blue. The span will not be blue despite having the class "blue", as it is not a child of .foo