This question might be simpler in conditional CSS.
I have five rows with some contents and based on some condition, I'm adding a class named 'previous' to show different background color.
When I hover the previous class content, I'm getting transparent background which is not good.
I wanted to show the same background color (grey) even if it is hovered.
So, I tried the below code and tried to use :has condition in css, If it has previous class, change the hover color to grey. But it didn't worked.
My expectation is to have the same background color even if it is hovered.
Can someone help me on this as I need the solution only from CSS/SCSS. not from javascript.
.previous {
background-color: grey;
}
.row:hover {
background-color: transparent;
:has(.previous) {
background-color: grey;
}
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
You can do this using :not pseudo class to exclude rows with previous class from hover effect. Now :hover will run on every element that has a .row class but doesn't also have .previous class.
.row {
background-color: lightblue;
}
.previous {
background-color: grey;
}
.row:not(.previous):hover {
background: transparent;
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
Why not just change the order of your selectors and add a hover to the previous class too:
.row:hover {
background-color: transparent;
}
.previous,
.previous:hover {
background-color: grey;
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
Also, if you are wanting a row with the class previous, you just combine the selectors: .row.previous
:has is css4 and has very little support: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Here is a pure css solution.
You could set different styles for the hover when it has the previous class or not.
.row:hover {
background-color: transparent;
}
.row.previous {
background-color: grey;
}
.row.previous:hover {
background-color: #595959; /*any color really*/
}
<div class="row">Some Content 1</div>
<div class="row previous">Some Content 2</div>
<div class="row">Some Content 3</div>
<div class="row previous">Some Content 4</div>
<div class="row">Some Content 5</div>
Related
How to make the box size to be evenly as perfect square and make the words inside of it to shrink. I want to make it square and the inside word to shrink to small size based on the square, but they just flexing because of the contents.
This is my code, what should I change/remove/add?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mainbox {
background: grey;
display: flex;
margin: 5px;
}
.mainbox div {
flex: 1;
border: 2px solid black;
}
#row {
display: flex;
flex-direction: row;
}
#column {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<title>FlexSpiral</title>
</head>
<body>
<div class="mainbox">
<div>box 1</div>
<div>
box 2
<div id="row">
<div id="column">
<div id="row">
<div>box 5</div>
<div>
<div>box 6</div>
<div id="row">
<div>
<div id="row">
<div>box 9</div>
<div>box 10</div>
</div>
<div>box 8</div>
</div>
<div>box 7</div>
</div>
</div>
</div>
<div>box 4</div>
</div>
<div>box 3</div>
</div>
</div>
</div>
</body>
</html>
I didn't quite understand the question, but here goes
You can take the margin from the ".mainbox" that it is giving margin on all sides of the mainbox class.
To leave the div box occupying its own content you can use in the styling: display:inline-block
Note: a good practice is to use class instead of id to identify the styling, and id more for future interaction when using script and interactions.
I have a homework in CSS.
My job is to draw a route of bus.
This is my html:
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 1</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name-wrapper">
<div class="city-name-line">
<div class="city-name">City 2</div>
</div>
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
</div>
</div>
I have to style it like The pircture below:
Stops are grouped by city.
Each group has a Vertical bracket on left.
Rotated label with City name On the bracket line.
I tried this css, but i don't now how to make it work...
Here is link for JsFiddle:
https://jsfiddle.net/edm6qrt2/
I prefare to use modern CSS, including flex or grid.
I need suppoort only for Google Chrome.
Thenk's for any help!
One approach would be to use pseduo elements to create the left-most vertical line
that spans the height of the city group.
Additionally, you could align the city-name along that vertical line via a CSS transform, as documented in the code snippet below:
.city-group {
position:relative;
/* Create space to left of city group to
accomodate the city name and lines */
padding-left:2rem;
}
/* Define pseudo element for vertical black
line to the left, spanning the vertical axis
of the city group */
.city-group:before {
content:"";
display:block;
border-left:1px solid black;
left:.75rem;
top:1rem;
bottom:1rem;
position:absolute;
}
/* Transform the city name with translation and
rotation to place in line with line spanning left
of city group */
.city-name {
transform: translate(-50%, 0%) rotate(-90deg) translateY(50%);
position: absolute;
left: 0;
top: 50%;
margin-top:-0.5em;
border:2px solid orange;
background:white;
padding:0 1rem;
z-index:1;
}
/* Create spacing above/below each stop */
.stop {
padding:0.5rem 0;
position:realtive;
}
/* Style pseudo elements for first and last
stop which are the horizontal line segments
for these stops. These line segments connect
with the vertical line defined above */
.stop:first-child:before,
.stop:last-child:before {
content:"";
display:block;
border-top:1px solid black;
left:.75rem;
width:0.75rem;
position:absolute;
}
/* Offset first line segement from top of
city group */
.stop:first-child:before {
top:1rem;
}
/* Offset last line segement from bottom of
city group */
.stop:last-child:before {
bottom:1rem;
}
<div class="city-group">
<div class="city-name">
City 1
</div>
<div class="stop-list">
<div class="stop">Stop 1</div>
<div class="stop">Stop 2</div>
<div class="stop">Stop 3</div>
<div class="stop">Stop 4</div>
<div class="stop">Stop 5</div>
</div>
</div>
<div class="city-group">
<div class="city-name">
Long City 2
</div>
<div class="stop-list">
<div class="stop">Stop 6</div>
<div class="stop">Stop 7</div>
<div class="stop">Stop 8</div>
<div class="stop">Stop 9</div>
<div class="stop">Stop 10</div>
</div>
</div>
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 6 years ago.
It works perfectly if I remove the first div.
But if I have the first div without the class, it doesn't work correctly.
Test 1 should be blue and the next test should be red, and so on.
When I have another div, it doesn't work correctly. How do I solve this issue?
.el:nth-of-type(odd) {
background-color: blue;
}
.el:nth-of-type(even) {
background-color: red;
}
<div id="content">
<div>nothing</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
</div>
In your particular case, you could simply reverse the CSS rules for odd and even nth-of-type (see snippet). The nth-of-type refers to the tag, i.e. the divelement, not the class, therefore also counting the first div which doesn't have a class.
Since your CSS rule selectors combine the class with the nth-of-type, the first div isn't affected, since it doesn't have a class, yet the counting for odd or even starts at the first div.
.el:nth-of-type(odd) {
background-color: red;
}
.el:nth-of-type(even) {
background-color: blue;
}
<div id="content">
<div>nothing</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
</div>
How do I solve this issue?
Change the first div to another element, so it gets skipped by nth-of-type.
.el:nth-of-type(odd) {
background-color: blue;
}
.el:nth-of-type(even) {
background-color: red;
}
<div id="content">
<span>nothing</span>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
<div class="el">Test 1</div>
</div>
I have a bunch of divs with class B following a div with class A:
<div class="B"></div>
<div class="A"></div>
<div class="A"></div>
<div class="A"></div>
<div class="B"></div>
<div class="A"></div>
I'm trying to apply a CSS rule to the last A after each B. I tried
.B ~ .A:last-of-type
but that didn't work. Is this possible?
You can't currently do this with css. The :last-of-type pseudo class works with element types such as span div etc - not with classes
Being that:
1) There is no currently no previous sibling selector
2) You can't change the structure of your markup and
3) You don't know in advance how many .A divs you have after each .B div ...
... you're out luck, CSS currently can't do this.
You can use :last-of-type selector in this case.
.A:last-of-type {
/*apply styling */
}
In your case I recommend you to group them in divs. http://jsfiddle.net/GtLWJ/
This works.
<div class="sec1">
<div class="head">Set</div>
<div class="sub">Item 1</div>
<div class="sub">Item 2</div>
<div class="sub">Item 3</div>
</div>
<div class="sec1">
<div class="head">Set</div>
<div class="sub">Item 1</div>
</div>
CSS:
.head {
font-weight: 800;
}
.sec1 .sub:last-of-type {
border-bottom: 1px solid #000;
}
I have created 3 different sets of columns, but I want the ability to style each column differently.
<div id="container">
<div class="first">
<div class="column">Featured Work</div>
<div class="column">info</div>
<div class="column">info</div>
</div>
<div class="middle">
<div class="column">News</div>
<div class="column">middle column</div>
<div class="column">right column</div>
</div>
<div class="footer">
<div class="column">body copy 1</div>
<div class="column">body copy 2</div>
<div class="column">body copy 3</div>
</div>
this is my current code: http://jsfiddle.net/TroyAlford/Cj6dj/2/
I want to style the featured work and news columns with top and bottom boarders and to style the type. The two Info columns along with the middle and Right columns would have full boarder around it.
Would I rename each class to a unique name to achieve this effect?
You can you the :first-child selector - DEMO
#container .first div.column:first-child,
#container .middle div.column:first-child {
border-width: 1px 0;
color: #c00;
}