Here is an example code for what I mean:
HTML
<ul class="table">
<li class="table-cell"></li>
<li class="table-cell"></li>
<li class="table-cell"></li>
<li class="table-cell"></li>
</ul>
CSS:
.table {
display: table;
}
.table-cell {
display: table-cell;
width: 25%;
}
Q: How can I make the third and forth <li> (table cells) display on new row with width: 50% each?
Q: Is there a way using only CSS and not jQuery or Javascript?
The simple answer is: you can't, at least not with lists. Adjacent elements with their display set to table-cell are treated as belonging to the same row (even if a row element is not provided, an anonymous one will be created for you). Since lists aren't allowed to contain any other tags between the ul and the li, this simply isn't possible with lists. You'll have to use either different markup or different styling.
Here are your options if you don't want to modify the markup.
Inline-block on the list items: http://jsfiddle.net/XNq74/1/
li {
display: inline-block; /* could use floats here instead */
width: 40%;
}
CSS columns would be a reasonable choice: http://jsfiddle.net/XNq74/
ul {
columns: 2;
}
http://caniuse.com/#feat=multicolumn
Flexbox would also work and can be used in combination with inline-block: http://jsfiddle.net/XNq74/2/
ul {
display: flex;
flex-flow: row wrap;
}
li {
flex: 1 1 40%;
}
http://caniuse.com/#search=flexbox
ul.table li+li+li { /** your CSS code **/ } This one is for the third element
ul.table li.last { /** your CSS code **/ } This one is for the fourth element
Related
I'd like to hide all of the content on a page except for on specific div containing class="content-container" when printing a webpage.
My markup now is:
#media print {
:not(.content-container) {
display: none!important;
}
}
Now when I try to print the page nothing is visible, also the div isn't. I think I need to select like everything that is not a child of .content-container but don't know how.
Does somebody know how to target everything but that div and it's children?
N.B. This solution only works if .content-container is, itself, not a child of another element.
You will be able to achieve this effect by applying display: none to every element on the page and then over-riding that display specifically for .content-container and its children.
Example:
#media print {
/* APPLY DISPLAY:NONE TO EVERYTHING */
* {
display: none;
}
/* OVERRIDE DISPLAY:NONE FOR .CONTENT-CONTAINER AND ITS CHILDREN */
html,
body,
.content-container,
.content-container * {
display: initial;
}
}
Where .content-container is a child of main
If .content-container is consistently a child of main, the same effect should be relatively easy to achieve with the following style rules:
html,
body,
main,
main .content-container,
.content-container * {
display: initial;
}
Working Example:
* {
display: none;
}
html,
body,
main,
main .content-container,
.content-container * {
display: block;
}
<header>ABC</header>
<main>
<h2>DEF</h2>
<article class="content-container">
<p>GHI</p>
<p>JKL</p>
</article>
</main>
<aside>
<p>MNO</p>
<aside>
<nav>
<ul>
<li>PQR</li>
<li>STU</li>
</ul>
</nav>
Is it possible to check the class of an element, see if it exists, and then apply the style for another class?
Example pseudo code:
if (.myClass .myBlock == true) {
.otherClass {
display:none
}
}
It's not possible in this context. But you can achieve a similar result with the cascading nature of CSS.
Apply a class to the body of your website:
.another-class {
display: none; // hides .another-class by default
}
body.special-class {
.another-class {
display: block; // shows if the body contains .special-class
}
}
Since the specificity of the generated output is higher at the second rule, the elements with .another-class will be visible.
Give the following row a class
Utilising the + selector enables us to display the row after the mentioned class. This way we can style dropdowns popups, given we have the following HTML:
.popup {
display: none;
}
.popup:hover {
display: block;
}
.container:hover + .popup {
display: block;
}
<div class="container">Hover me!</div>
<div class="popup">This is a popup!</div>
I'm afraid that's all that is possible with CSS.
I am trying to apply my CSS file to 2 of my lists
<ul class="list1">
<li>Cat</li>
<li>kittens</li>
</ul>
<ul class="list2">
<li>Pizza</li>
<li>Popcorn</li>
</ul>
I want only one of them to be inline so I'm trying
ul.list1 {
display: inline;
}
but the inline won't work unless I do
li {
display: inline;
}
which applies to all my lists. How do I make it son only inline affects one list?
I'm guessing you want one of the lists to be horizontal, like so:
.list1 li { display: inline; }
Look up how to use descendant selectors, it is one of the basic powers of CSS.
Increase the specificity of your selector. For example...
ul.list1 li { display: inline; }
For further complexity as an example... If you have both of these lists appearing twice in your site, once inside a div with the ID #content, and once inside a footer widget with ID #widget. Then you can target the list inside #content by typing.
#content ul.list1 li { display: inline; }
Here is a link to an article to the W3C Wiki on CSS3 Selectors
The above link will give you everything you need to know concerning combinators, pseudo-selectors and pseduo-elements. Learn this and you can conquer the internet.
Use
.list1 li {display:inline;}
The following code will make all of your listings inline, as I can understand, this is not your intention.
li {
display: inline;
}
Instead, you should specify that you only want one of the lists elements to have this style. You should therefor use the following code.
.list1 li {
display: inline;
}
This will make all list entries within the list1 class inline.
I'm wondering if it is possible to do this in CSS, without javascript:
A list of N <li> items, with display inline, equal width, and the width of the all equal to the width of the container
I can have 3 <li> items, in this case the <li> width will be 33%, or I can have 4 <li> items, then the li width will be 25%.
This is a perfect example for usage of display: table.
Works in modern browsers and IE8+...
Support chart
JSFiddle
css:
ul {
display: table;
width: 100%;
table-layout: fixed; /* optional, for equal spacing */
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
vertical-align: middle; /* or similar, if needed */
}
html:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
It is possible with CSS3 flex boxes, as demonstrated in this fiddle (for webkit browsers only). There are other browser custom properties that would make this work for recent versions of Firefox and IE. If you need something that works for Opera or older versions of IE then there is a JavaScript library called Flexie which might work.
Credit to The CSS3 Flexible Box Layout (flexbox) for the information on the browser support.
HTML
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
CSS
ul {
display:-webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack:justify;
width:200px;
}
li {
-webkit-box-flex:1;
border:1px dashed grey;
text-align:center;
}
You could, with a limited number of possibilities. In CSS3 you can't do it for an arbitrary number of columns, though. You may be able to in CSS4; I don't know yet.
li {
display: inline;
}
/* 1 column */
li:first-child:last-child {
width: 100%;
}
/* 2 columns */
li:first-child:nth-last-child(2),
li:nth-child(2):last-child {
width: 50%;
}
/* 3 columns */
li:first-child:nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):last-child {
width: 33.3333%;
}
/* 4 columns */
li:first-child:nth-last-child(4),
li:nth-child(2):nth-last-child(3),
li:nth-child(3):nth-last-child(2),
li:nth-child(4):last-child {
width: 25%;
}
I hope you get the idea. Do you want to do this? I hope not.
Assuming the lis are generated from some server-side code, you can use the following "trick":
// in the markup add a class to the UL based on the count of messages
<ul class="col<%= echo count(lis) %>">
...
// and in the CSS
// (notice you have to use display: inline-block, as inline doesn't allow you to
// specify a width)
li { display: inline-block; }
.col3 li { width: 33.3%; }
.col4 li { width: 25%; }
// etc
Make a standard left-floated list and you can (or must) set display to inline to avoid IE6 doubling a possibly existing margin-left.
Assuming you have a static page, you can set your list up like this:
HTML:
<ul class="listLR col3 clearfix">
<li></li>
<li></li>
<li></li>
</ul>
and CSS:
listLR {
width: 100%; // important for IE!
}
listLR > li {
display: inline;
float: left;
}
col3 > li {
width: 33.33%;
}
col4 > li {
width: 25%;
} //and so on
The use of a clearfix-class is demonstrated here
Is there a CSS property that tells the browser to word-wrap at any position, not only at word boundaries?
My current issue is this. I am faced with HTML similar to this: (I cannot change the HTML, unfortunately)
<div id='categories'>Categories:
<ul>
<li>Category One</li>
<li>Category Two</li>
<li>Category Three</li>
</ul>
</div>
I want it to display in a flowing manner according to the width of the viewport:
Categories: • Category One • Category Two • Category Three
|----------------------------------------------------------------| (viewport)
Categories: • Category One • Category Two
• Category Three
|----------------------------------------------| (viewport width)
Categories: • Category One
• Category Two • Category Three
|----------------------------------| (viewport width)
... but NOT word-breaking within a category name.
So I tried this:
#categories ul {
display: inline;
}
#categories li {
display: inline;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
Unfortunately this causes them all to run in one line. So I need to be able to tell the ul to allow wrapping anywhere between any adjacent lis. How do I do that?
I need a CSS-only solution; I cannot change the HTML...
A useful trick for wrapping boxes is to make them all float: left. If I do this to your example, then I get the layout you want except for "Categories:" being pushed to the right. Unfortunately, I don't know of a way to select the text so as to make it floated.
We can use content to re-insert "Categories:" as one of the floated boxes, which leaves the problem of how to hide the existing "Categories:" text without hiding the other contents of #categories. The cleanest way I thought of was to make it transparent. However, this is a CSS3 feature; also, this loses any inherited color due to the need to explicitly set it on the ul.
This stylesheet produces everything you want, but needs some tweaking for spacing.
#categories {
color: transparent;
}
#categories ul {
color: black;
}
#categories li {
display: inline;
float: left;
padding: 0 1em;
white-space: nowrap;
}
#categories li:before {
content: '• ';
}
#categories li:first-child:before {
content: 'Categories: • ';
}
Maybe this?
<ul>Categories: <li>Category One</li><wbr><li>Category Two</li><wbr><li>Category Three</li></ul>