This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 7 months ago.
I want to override all the child css with parent css
Below is the code which I am trying to use
.wrapper > * {
font-family: arial !important;
font-size: 13px !important;
}
<div class="wrapper">
<div>Text 00
<div>Text 1</div>
<span>Text 2</span>
<div>
<div style="font-family: Helvetica; font-size: 18px;">Text 3</div>
<div>Text 4</div>
</div>
<div>Text 5</div>
</div>
<div>Text 6</div>
</div>
Actual result:
Expected result:
Your selector was slightly wrong, remove the > so it just reads .wrapper * this will get all children of the wrapper. Where as .wrapper > * will only get elements one layer deep
/* ALL CHILDREN */
.wrapper * {
color: green;
font-family: arial !important;
font-size: 13px !important;
}
/* FIRST LAYER OF CHILDREN */
.wrapper > * { color: red }
<div class="wrapper">
<div>Text 00
<div>Text 1</div>
<span>Text 2</span>
<div>
<div style="font-family: Helvetica; font-size: 18px;">Text 3</div>
<div>Text 4</div>
</div>
<div>Text 5</div>
</div>
<div>Text 6</div>
</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>
I don't know if this is possible with flex but what i need is a list with two items side by side and the width per item depends on the content. Like here:
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
align-self: flex-end;
box-sizing: border-box;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.item:nth-child(even) {
background-color: darkgrey;
}
How can i realise that always two items are side by side no matter how many li items i have? There is no outer container that limits the width. I don't want to use float. Is there a flexible solution with grid template columns?
Final result like this (but aligned to the right):
In addition to theAlexandrian's answer, and if you can add an inner wrapper, here is an option, where you use the inner div, displayed as inline-block, for styling, e.g. padding etc.
Since we deal with inline elements, they, like characters, can have a space between them. One way is to take it out using a negative margin, and here is a few more options:
How do I remove the space between inline-block elements?
Note, since the space width is based on the font, the negative margin might need an adjustment.
Stack snippet
.items {
text-align: right;
}
.item {
display: inline;
margin-right: -4px; /* take out inline element space */
}
.item div {
display: inline-block;
background: #e0ddd5;
color: #171e42;
padding: 10px;
}
.item:nth-child(even) div {
background-color: darkgrey;
}
.item:nth-child(even)::after {
content: '\A';
white-space: pre;
}
<div class="items">
<div class="item"><div> Item 1 with text </div></div>
<div class="item"><div> Item 2 with more text </div></div>
<div class="item"><div> Item 3 with some text </div></div>
<div class="item"><div> Item 4 without text </div></div>
<div class="item"><div> Item 5 lorem </div></div>
<div class="item"><div> Item 6 ipsum </div></div>
<div class="item"><div> Item 7 with lorem </div></div>
<div class="item"><div> Item 8 with ipsum </div></div>
</div>
If float is forbidden, I do have a simple solution for you! :)
We will use inline, block, :nth-child and ::after.
There we go:
.item {
display: inline;
}
.item:nth-child(2n)::after {
display: block;
content: '';
}
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
Simple, isn't it?
Have you tried css columns?
.items {
columns: 2
}
<div class="items">
<div class="item">Item 1 with text</div>
<div class="item">Item 2 with more text</div>
<div class="item">Item 3 with some text</div>
<div class="item">Item 4 without text</div>
<div class="item">Item 5 lorem</div>
<div class="item">Item 6 ipsum</div>
<div class="item">Item 7 with lorem</div>
<div class="item">Item 8 with ipsum</div>
</div>
How can I place 4 divs next to each other which width's will be calculated automatically (since every resolution of a monitor is different).
So whenever I have 16 divs, the amount shown div's still has to be 4.
I thought of giving a percentage, for each div. But that doesn't seem to be working (which is pretty obvious since every monitor has a different resolution of their screen displaying)
Just add a width using a percentage value (25%) which will put 4 boxes next to each other on each line.
.box {
float: left;
width: 25%;
}
I suggest you use a framework like bootstrap.
But this is the basic requirement you need to show 4 divs in a row...
just ignore the background and the div:nth-child(even) - I added that just so you could see the div areas clearly.
section {
max-width: 960px;
margin: auto;
}
div {
width: 25%;
float: left;
background: cornsilk;
}
div:nth-child(even) {
background: lightgreen;
}
<section>
<div>number 1</div>
<div>number 2</div>
<div>number 3</div>
<div>number 4</div>
<div>number 5</div>
<div>number 6</div>
<div>number 7</div>
<div>number 8</div>
<div>number 9</div>
<div>number 10</div>
<div>number 11</div>
<div>number 12</div>
<div>number 13</div>
<div>number 14</div>
<div>number 15</div>
<div>number 16</div>
</section>
You can better use Bootstrap framework.
for example,
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="searcharea col-md-12">
<div class="col-md-12">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
</body>
</html>
I have a div with variable length lines of text in it. Right now I have something like
<div id="container" style="width: 500px">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
I can text-align: center the container, but I want each line to be left justified relative to the longest line which is truly centered, as opposed to each line being centered on its own.
Is there an easy CSS way to do this... or should I resort to using tables to lay this out?
Your html:
<div id="container">
<span>
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</span>
</div>
Your CSS:
#container {
width: 500px;
background: #eee;
text-align: center;
padding: 10px 0;
}
#container span {
display: inline-block;
background-color: #ccc;
}
#container span div {
text-align: left;
}
Demo: http://jsfiddle.net/G6ABA/
That should work:
<div id="container" style="width: 500px; text-align:center;">
<div style="text-align:left;">
<div>Text Line 1</div>
<div>Text Line 2 of different length</div>
<div>Text Line 3</div>
</div>
</div>
use
<span> </span>
and css
width:500px;
text-align:center;
position:absolute;
do you set pic or color to div background?
or better i said is it your div width important?
if not maybe this solution can solve your problem:
<div id="someID" style="width: auto; text-align:left;">
<div>line 1</div>
<div>line 2 is more longer</div>
<div>line 3</div>
</div>