I want to apply some CSS to the last blog-post. The problem is that the last element in the div 'blog-posts' is the same type of element as the 'blog-post' divs.
I've tried:
last-of-type
last-child
HTML:
<div class="blog-posts">
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="blog-post"></div>
<div class="f03-456245"></div>
</div>
CSS:
.blog-post:last-child{
//do some css
}
Last element using .class is not possible. In your case you can use nth-last-child property.
.blog-posts div:nth-last-child(2) {
background: #ff0000;
}
DEMO
You may have to do like this:
.blog-posts div:last-child{
//do some css
}
It is assuming div is the element. It applies for anyother element type p , span etc...
Related
Basically, I'm creating a dark theme system for my website, and it adds the dark class to the html tag when the proper function is called. I'm using CSS variables like --light-theme-bg: white; and accessing them with var(--light-theme-bg);. How can I style specific elements such as hr based on if that dark class is attached to the html element. How can I do this?
Scoping is your friend. You'll need to add two rules to your CSS. One for the dark theme and one for the light one.
In those rules, you can define a --background var.
All child elements that reference that var will respect it.
.light {
--background: #f9f9f9;
}
.dark {
--background: #191919;
}
.first,
.second {
color: red;
background: var(--background);
}
<div class="light">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
<div class="dark">
<div class="first"> I'm the first div</div>
<div class="second">I'm the second div</div>
</div>
If you want to select an element inside a .class, use the css syntax .class element, so your code would be .dark hr to select it an hr element inside an element with the class of .dark.
As you mention It added "dark" class to the parent html tag. So considering dark as parent class you can use css to all element like
.dark elements(h1/div/p/others)
I have this HTML:
<div class="row">
<div id="sidebar" class="column large-2 medium-3">
<div class="row">
test
</div>
</div>
<div id="rightside" class="column large-10 medium-9">
<div class="row">test2</div>
</div>
</div>
And this CSS:
#rightside:first-child{
border-bottom:solid 1px #main_color;
text-align:center;
}
#sidebar:first-child{
border-bottom:solid 1px #main_color;
text-align:center;
}
I'm using Zurb Foundation 5. The sidebar first-child works, but the one for the #rightside elements does not. Any idea why?
I've inspected the element #rightside and I can't see the CSS selector that I've applied in the inspector in Chrome. It seems that it doesn't recognize that selector for some reason.
I have nothing else in the CSS code, just this.
#rightside div:first-child
{
/* styles */
}
#sidebar div:first-child
{
/* styles */
}
This way you apply your styles to the first DIV inside of #rightside and #sidebar.
Because of comments: this will only work if your first-child is actually a div, if you want to style the first-child regardless of it's type you can use:
#sidebar :first-child
{
/* styles */
}
For #rightside:first-child to work, the div with ID rightside would need to be the first child of the parent, as the div with ID sidebar is.
Given that you're using IDs, the div with ID rightside should be the only one in your HTML so the selector you'd use would be simply #rightside.
You need this https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
This targets the first type of a particular element, in your case it is a div
#rightside div:first-of-type {
background-color: red;
}
http://jsfiddle.net/w0wprkb0/
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
I have an issue with hover
I have 3 child div's like:
<div class="parent">
<div class="child1">A</div>
<div class="child2">B</div>
<div class="child3">C</div>
</div>
I had applied hover on parant div to change color on child1 and child2 div.
Yet hover is applied over child3 div too....
Is there a way to exclude hover on child3 alone??
Any help is appreciated. Thanks in advance.
div.parent:hover {
color: #909090;
}
In the the above example there has to be no change of color on font "C" though it is present inside parant div.
Just make your CSS more specific:
.parent:hover .child1, .parent:hover .child2 {
color:#909090;
}
div.parent:hover {
color:#909090;
}
Your CSS is saying "select DIV tags with class parent and apply the following CSS only on hover state, then change font color to #909090".
First, if you want hover state on the child, do this:
/* explanation: select DIV tags with "child" class on hover state */
div.parent div:hover {
/* apply your CSS here */
}
If you want to make specific CSS for some tags and exclude it from other tags, be more specific. You can add more than 1 class to any tag. For example, let's add another class for child1 and child2 for special hover state, and exclude it for child3:
<div class="parent">
<div class="child1 myHoverClass"></div>
<div class="child2 myHoverClass"></div>
<div class="child3"></div>
</div>
Now it's easy to control that with CSS:
/* explanation: find parent class div, then select children DIV tags with class name "myHoverClass" and apply CSS for hover state only.. in this case, only child1 and child2 DIV tags */
div.parent div.myHoverClass:hover {
/* apply your CSS here */
}
Note: watch out for spaces in CSS, they are very sensitive and it could completely mean something else without cautious use.
You can try adding the style
.child3
{
color : #000;
}
DEMO
.child1:hover, .child2:hover {
color:#909090;
}
FIDDLE DEMO
div.parent:hover > :not(.child3) {
color:#909090;
}
div.parent:hover .child1,div.parent:hover .child2{
color: #909090;
}
add a different class to child1 and child2 like this may be:
<div class="parent">
<div class="test child1"></div>
<div class="test child2"></div>
<div class="child3"></div>
</div>
.test:hover{background-color:red;}
Hi Friends i am using :target in CSS following is my code
CSS
.acco h3 + div{height:0px; overflow:hidden;}
.acco : target h3 + div {
border: 2px solid red;
height:100px;
HTML
<div class="acco">
<h3>show</h3>
<div class="test">test</div>
<div class="click" >click</div>
</div>
I am targeting <div class="test">test</div> but its not working please help me
Thanks in advance...
First of all, you are missing the #show anchor in your markup (and depending on the position) an adaption of the css is necessary (in every case there must not be a space in your pseudoclass :target):
<div class="acco" id="show">
/* css: no spaces*/
.acco:target h3 + div {
<!-- or -->
<div class="acco">
<h3 id="show">show</h3>
/*css: space between .acco and :target!*/
.acco :target + div {
Demo (first version)
Try
.acco:target h3 + div {
border: 2px solid red;
height:100px;
}
without spaces
The pseudo class that you’re probably most familiar with is :hover, which allows you to declare special styling that will be activated when the user mouses over an element. The :target pseudo class similarly allows for custom styling that will be activated based on a specific scenario.
:target is a pseudo selector like :hover, and there should be no space in between.
Good read about it overhere