To style the last element of a nested list...
<div>
<div>
<div>1</div>
<div>2</div>
</div>
<div>
<div>1</div>
<div>2</div> <!-- style this -->
</div>
</div>
...we can use this selector:
div>div:last-of-type>div:last-of-type
But if these <div> were web components using shadow dom - how does one style this last element (without JS)?
A global selector wouldn't work because it'd have no influence on the children. And a child itself wouldn't know if it's really the last child because it can't look "outside" itself.
Any ideas?
You are not saying where does really your shadow starts. But I guess that the only problem would be when it starts mid-level.
In this case, setting a css variable in this should work:
I am crossing the shadow boundary using the --mycolor property
.element:last-child {
--mycolor: red;
}
.inner:last-child {
background-color: var(--mycolor);
}
<div>
<div class="element">
<div class="inner">1</div>
<div class="inner">2</div>
</div>
<div class="element"> <!-- shadow starts here -->
<div class="inner">1</div>
<div class="inner">2</div> <!-- style this -->
</div>
</div>
Related
I can change child on parent hover like this:
.parent:hover .child{ ... }
Problem is, that this will change all childs in document.
(I'm using parent 10x on the page => it will change childs in all these parent)
Is there a CSS way, how to change only child of the parent, that I'm currently hovering over?
Example:
<div class="parent">
<p class="child"></p>
</div>
<div class="parent">
<p class="child"></p>
</div>
<div class="parent">
<p class="child"></p>
</div>
If I hover over first .parent, I want change on its .child. But my mentioned solution will affect all childs.
You'll want to directly select the child using the ">" or the "adjacent sibling combinator"
.parent:hover > .child{
background: red;
}
<div class="parent">
<p class="child">child one</p>
</div>
<div class="parent">
<p class="child">child two</p>
</div>
<div class="parent">
<p class="child">child three</p>
</div>
I am using bulma as css framework, and have a section on my page where I am looping over items, and creating multiline columns.
<section class="section employees">
<div class="container">
<div v-for="(value, key) of employeesGroupedByDepartments">
<div class="columns is-multiline department">
<div class="title-with-line">
<h4><span>{{ key }}</span></h4>
</div>
<div class="employee column is-3" v-for="employee of value">
<div class="card">
<figure class="image is-96x96">
<img :src="employee.image.data.path" alt="">
</figure>
<h4 class="title is-5">
{{employee.title}}
</h4>
<h6 class="subtitle is-6">
<small>
{{getExtras(employee, 'position')}}
</small>
</h6>
</div>
</div>
</div>
</div>
</div>
</section>
I would like to remove left padding for each first child column, I have tried with setting even to both classes padding left 0 as important but nothing worked:
.employees {
.column:first-child, employee:first-child {
padding-left: 0!important;
}
}
What am I doing wrong?
A .column will never be a first-child, because there is always a div.title-with-line before it.
From MDN:
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
You would need the :nth-child or :nth-of-type selector.
.column is not the first child as you have a div with class title-with-line proceeding it. What you're looking for is:
.employees {
.column:nth-child(2), .employee:nth-child(2) {
padding-left: 0!important;
}
}
trying to target just the first .row but i seem to be targeting all rows. Why isn't first-child working? Here's my code:
<footer class="f1">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</footer>
CSS
.f1 .container .row:first-child {
padding-top:42px;
position:relative;
}
The pseudo selector :first-child is targeting the first child of each thing that matches the selector: .f1 .container .row. Since you have two instances of containers and each with a row as a child, the selector is affecting the first child of each. If you want only the row of the first container to be affected, you need to specify the first container as well. Ex: .f1 .container:first-child .row
Use the below css selector it should be affecting for all rows.
.f1 .container .row {
padding-top:42px;
position:relative;
}.
It should work.
I have the following markup:
<div class="class-XXX">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
For simplicity, lets assume that class-XXX can only have the values class-1, class-2, class-3 and class-4.
I want to apply the rule color: #fff; to every child of class-5 that is not a child of class-1. Here that part of my stylesheet:
.class-2 .class-5,
.class-3 .class-5,
.class-4 .class-5 {
color: #fff;
}
This is not working and I'm not really sure why. I don't believe that the rule is being overridden either.
UPDATE
As AndrewBone pointed out, the rule appears to work in a minimal example. I now understand what is wrong, but I don't know how to fix it:
There is a rule being applied to h1 in another CSS file (can't be removed) and that rule is being given higher priority than the rule I was writing. How can I fix this?
Here is an example JSFiddle.
SOLUTION
Vucko pointed out that the h1 type selector has higher priority and so the rule will not be applied. So, in order to avoid listing all possible combinations one should use the * selector!
End result:
.class-2 .class-5 *,
.class-3 .class-5 *,
.class-4 .class-5 *{
color: #fff;
}
My thanks to Paulie_D and David Wilkinson for teaching me about the :not pseudo-selector.
This would do it..
[class^="class-"]:not(.class-1) .class-5 {
*/ your styles here */
}
...but this only works for a specific methodolody in classnames as above.
[class^="class-"]:not(.class-1) .class-5 {
color: red;
}
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-5">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
If you have some container for those divs, you can then use the :not selector (as Harry mentioned in the comment):
.main :not(.class-1) .class-5 {
color: red;
}
<div class="main">
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>1</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>2</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>3</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>4</h1>
</div>
</div>
<div class="class-5">
<div class="class-5">
<!-- could be any text element -->
<h1>5</h1>
</div>
</div>
</div>
.main :not(.class-1) .class-5 {
color: red;
}
JSFiddle
This does the trick: https://jsfiddle.net/023rox1k/
CSS:
.wrapper :not(.class-1) .class-5 {
color: blue;
}
HTML:
<div class="wrapper">
<div class="class-1">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-2">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-3">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
<div class="class-4">
<div class="class-5">
<!-- could be any text element -->
<h1>Content</h1>
</div>
</div>
</div>
The :not selector is quite powerful and obviously targets elements not of a certain class in this case.
I am trying to select every other div with a class name. the issue is there are all in different parent div's. I've tried many things with sibling selection but have not yet found a solution. This is what I am looking for:
Add a margin of 30px to ever even div with the class name article
<div class="wrapper">
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
</div>
I tried something like this but did not work:
.section > .article:nth-child(even){
margin-right: 30px;
}
Rather than select the even/odd .article elements, you need to select the even/odd .section elements.
.section:nth-child(even) > .article
{
/* Your css here */
}
Fiddle: http://jsfiddle.net/jakelauer/4PMbS/