I send an email to outlook 2010 client.
Here is the code:
<div class="content">
<div class="lorem">AAA</div>
<div class="ipsum">BBB</div>
<div class="dolor">CCC</div>
<div class="lorem">This div has to be hidden</div>
<div class="ipsum">BBB</div>
<div class="dolor">CCC</div>
<div class="lorem">This div has to be hidden</div>
<div class="ipsum">BBB</div>
<div class="dolor">CCC</div>
</div>
How to hide all "lorem" class except the first one ? I already tried ".content > div:first-class" but it doesn't work
You can do it like this:
.content .lorem:not(:first-child) {
display: none;
}
Related
I have the css class 'control', and I want to get all the 'control' children elements from my container, but I dont want to get grandsons 'control'.
<div id='mydiv'>
<div id='div1' class='control'>
<div id='div2' class='control'></div>
<div id='div3' class='control'></div>
</div>
<div class='other'>
<div id='div4' class='control'></div>
<div id='div5' class='control'>
<div id='div6' class='control'></div>
<div id='div7' class='control'></div>
</div>
</div>
</div>
The call below will get me all the controls inside 'mydiv'.
document.querySelectorAll('#mydiv .control');
I want a query that brings me only #div1, #div4 and #div5;
Is that possible?
With only querySelector* it will not work at the moment.
In the future, browsers will support the :has() pseudo-selector.
Then you can select only elements which has or not has elements inside them like this:
#mydiv .control:not(:has(.control))
See the current browser support for this: https://caniuse.com/css-has
For now you need following sulution:
const elements = [...document.querySelectorAll('#mydiv .control')].filter(element => {
return element.parentNode.closest('.control') == null
});
console.log(elements);
<div id='mydiv'>
<div id='div1' class='control'>
<div id='div2' class='control'></div>
<div id='div3' class='control'></div>
</div>
<div class='other'>
<div id='div4' class='control'></div>
<div id='div5' class='control'>
<div id='div6' class='control'></div>
<div id='div7' class='control'></div>
</div>
</div>
</div>
Explanation:
Get at first all .control elements into an array (querySelectorAll returns a NodeList and NodeList does'nt have methods like filter. So we extract it with the spread syntax [...variable]
Then filter all elements which has no parent elements named .control.
.closest() can return itself, so we need to make sure we call parentNode at first.
UPDATE End September 2022
Browser are starting to implement :has()
I've got basic css problem.
I want to add display: none; property to input-group_details element in my div class="textAdd".
divs from the console:
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
<!---->
</div>
</div>
When I write sth like:
.input-group__details{
display: none;
}
It works, but I want address only the element in my textAdd class. I cannot simply add new class to my <div class="input-group__details"> because it's actively rendered by the framework.
I think this is what you are expecting
.textAdd .input-group__details {
display: none;
}
<div class="textAdd input-group input-group--text-field input-group--single-line
input-group--multi-line input-group--full-width primary--text">
<label>Dodaj własne</label>
<div class="input-group__input">
<textarea tabindex="0" aria-label="Dodaj własne" rows="5"></textarea>
</div>
<div class="input-group__details">
This is hidden .... Some text here
</div>
</div>
<div class="input-group__details">
This is not hidden ... Some text here
</div>
I may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
I use div to replace table for 2 column. I have problem to display them in good view if 1st column text too long. For example: 'Spoken' should be inline with 'English' but not 'Loans, Dental' from previous 2nd column.
#wrap {
width:280px;
margin:0 auto;
}
.left_col {
float:left;
width:30%;
}
.right_col {
float:right;
width:70%;
}
http://jsfiddle.net/HtyXP/
the only way i see to fix this is either a table, or if you want to stick to divs desparately this:
<div id="wrap">
<div class="row">
<div class="left_col">Industry:</div>
<div class="right_col">Insurance</div>
</div><div class="row">
<div class="left_col">Co. Size:</div>
<div class="right_col">201 - 500 Employees</div>
</div><div class="row">
<div class="left_col">Working Hours:</div>
<div class="right_col">Regular hours, Mondays-Fridays</div>
</div><div class="row">
<div class="left_col">Benefits:</div>
<div class="right_col">Medical, Education support, Loans, Dental</div>
</div><div class="row">
<div class="left_col">Spoken Language:</div>
<div class="right_col">English</div>
</div>
</div>
That is caused because you set the width to 280px (#wrap). Medical, Education support, Loans, Dental is a very long sentence and it is overflowing the 70% of the right_col. The same thing with the Language spoken.
To make everything look good, you have to increase this value. A width of 400px should work.
We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.
In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.
That's why in the HTML these elements are declared as follows:
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.
The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.
Note: the height of the elements is unknown, and the width is percentual.
EDIT: For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. This fiddle shows what we don't want.
You could float A, C and D to the right. However you might need to apply overflow:auto to B and E. Also note, that if B is higher than A, C is getting pushed down to align accordingly.
Fiddle
Could you do something like this?
<div id="container">
<div id="A">A</div>
<div id="B" class = "left">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>
You can just set float:left in the media query you want and ignore it in the other one.
Edit:
In response to OP's feedback that B and D were not sitting directly on top of each other, revising the code to float: right instead fixes this. ie
<div id="container">
<div id="A" class = "right">A</div>
<div id="B" >B</div>
<div id="C" class = "right">C</div>
<div id="D" class = "right">D</div>
<div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>
For the normal layout, you should do it like this.
Both divs should be left floated.
<div id="container1">
<div id="left">
<div id="B">B</div>
<div id="E">E</div>
</div>
<div id="right">
<div id="A">A</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
</div>
The problem is that the mobile version uses another arrangement.
So one solution is to make onther version for the mobile page and hide #container1 (and vice versa for the other site).
<div id="container2">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>