Ok so I am going to try and explain this the best I can. I created a widget that will pull in a featured image from the post on the home page based on the category. Right now it pulls in 4 posts. I would like to have the option to pull in 2, 3, 4, or 6 posts. I would also like to change the layout based on how many posts are coming in. Is it possible to only display 2, 3,4, or 6 posts and how would I go about changing the layout based on the number of posts coming in. I was thinking it would refer to a container class in the css for each number of posts or something along the lines of that. Any links, tutorials, or advice would be greatly appreciated!
Thanks,
- Michael
Pure CSS
This provides a CSS3 method to achieve what you want, with a fall back in place for CSS2. Basically, you have a wrapper to target your post items, which will be the only children directly in that wrapper (or, at least the only children of a particular "tag" type, here a div). So something like the following, only the number of children can be 2, 3, 4, or 6 (as you requested).
Simple HTML (this does not have to be div elements; just illustrating)
<div class="postWrapper">
<div>This is a post</div>
<div>This is the second post</div>
</div>
Set Default CSS2
For IE7/8, this will be the default display no matter how many posts are being shown in those two browsers, using this selector:
.postWrapper > div { ... }
Set Fancy CSS3
This is doen based on number of posts and will be displayed in all CSS3 browsers. It uses this series of selectors, in this order: (we are using the cascade to our advantage here):
.postWrapper > div:nth-last-of-type(2),
.postWrapper > div:nth-last-of-type(2) ~ div {
... your two display css ...
}
.postWrapper > div:nth-last-of-type(3),
.postWrapper > div:nth-last-of-type(3) ~ div {
... your three display css ...
}
.postWrapper > div:nth-last-of-type(4),
.postWrapper > div:nth-last-of-type(4) ~ div {
... your four display css ...
}
.postWrapper > div:nth-last-of-type(6),
.postWrapper > div:nth-last-of-type(6) ~ div {
... your six display css ...
}
What this is doing is utilizing the :nth-last-of-type() selector to "count backwards" through the number of child div's of the wrapper, apply a style to that div, and then use the general sibling combinator ~ to style all the other div's in .postWrapper that follow that (theoretical) first div. It does this for the first two using the :nth-last-of-type(2), but then if the wrapper contains three, the next set of selectors that uses :nth-last-of-type(3) overrides the previous (2) selector, and so forth. In this way, through a series of overriding css in the cascade, we change our settings for the number of post elements.
You can see a sample of this technique for illustration purposes in in this fiddle.
NOTE: Because we are using the cascade to override, it is imperative that you make sure to handle any previously set css. In my fiddle example, note how I put a margin on a group of four, but then I removed it on a group of six. If I had mentioned nothing of margin in group six (that is, no overriding), then elements 3-6 (but not 1-2) of the group of six would have had margin still applied based off the previous settings for the group of four.
Related
I'd like to create a list on more columns. The number of the columns should change by the size of the window.
I can archive this just setting the col-- classes, like this:
<ol>
<li class="col-md-3 col-sm-4" data-ng-repeat="searchBoxItem in destinations">
{{searchBoxItem.name}}
<li>
</ol>
(angularjs is used just to repeat the elemnts, and to explain that they may change in quantity)
The result is quite fine:
when I'm on a pad, it is like this:
The point is that the sorting of the elements increases horizontally. I'd like instead to have them vertically sorted.
I can't imagine a way to do it in CSS3, or even with a clean solution, without involving js.
Possibly, I'd like to have ie8 compatibility :)
You're going to want to use the CSS3 Multi-Column Layout, via a combination of column-count and column-width. To make this work (and since columns are variable, depending on the device width), you're going to want to add additional classes to your list, to define column states for desktop and mobile.
This will ensure that things are sorted vertically, in a similar way that page columns are defined for print layouts (for example, newspapers).
This guide on CSS Tricks has a great overview of responsive CSS columns.
For example, in your case, you could use something like:
ol li {
-webkit-columns: 4 100px;
-moz-columns: 4 100px;
columns: 4 100px;
}
This basically says, "I want a maximum of 4 columns, with minimum widths of 100px. If the widths get too narrow during scaling...reduce the column count." But I'd recommend adding a class or ID to this area, so that you can target it specifically.
This problem is easier seen than described. See here: jsFiddle
To get a clearer understanding of what is going on, I have updated the fiddle to include a class .ui-sortable-placeholder to be visible and red. This is the class of the jQueryUI (normally) invisible element involved with the sortable. As seen here: http://jsfiddle.net/rLW9m/9/. Thanks to George for pointing that out in his answer. With this answer we can probably consider this resolved as far as the "what" but perhaps the "why" is still TBD.
Of the three scenarios shown, they all apply float:left to the LI elements but the final one behaves poorly; in the last bunch of sorted items, clicking on the first or second item "drops" the rest of the list beneath the row they were just in (and the item clicked).
The scenario is exhibited when the float:left CSS is applied directly to my <li>s using inline styling versus applying the same change via a css file. Is this a jQueryUI bug?
When I apply the CSS to my elements in the identical way to how jQueryUI's documentation shows (the first example in the jsFiddle), then the sorting occurs just fine. However, once the same CSS (as far as I understand it) is applied directly to my list items, then sorting behavior is erratic as described above.
The way to get jQueryUI to sort nicely in a grid is to apply the float only in your CSS file using classes or other mechanisms:
/* Starting from UL descriptor with LI descendants */
.ulClass li {
float:left;
}
/* or directly to LI element but still via CSS file */
.makeTheseLIsSortable {
float:left;
}
/* DOES NOT WORK properly to directly apply CSS
(items to the right are shifted below when items on left selected) */
<ul id='makeSortable'>
<li style='float:left'>test</li>
<li style='float:left'>three</li>
</ul>
Why are these two CSS applications handled so differently by jQueryUI? When it is rendered, it sure seems like the list elements themselves are float:left either way. What is your take? Why can't I apply the CSS directly to the list elements and get the same, expected behavior?
EDIT: Thanks to George, I now have a better understanding of what is going on. There are probably some really good reasons that jQueryUI doesn't copy down the element inline styles to their "placeholder element" but they do pass along class details. If a jQueryUI pro shows up later and considers this a bug then I'm glad to have reported it. Until then, be sure to apply your sortable element's float via a class! Can you explain why the inline styling is not included into the placeholder?
The problem is the place holder that jqueryUI inserts does not have a float left style on it. jQueryUI duplicates the element type and the classes on an item you are sorting for the place holder but it would appear it does not duplicate the inline styles.
I'm using jqUI to build an app with a content pane and side-menu.
When the page is showing the list, I want to hide some of the menu content, but when the page is showing an item, I want to show the menu content.
I've created a pretty basic jsfiddle as an example http://jsfiddle.net/pq83M/8/
I DON'T want to do this in javascript, as the page transitions are in the jqui library and I don't think it's effective to listen for this specific transition separately fro the others.
What I am hoping to figure out is a way of saying
when
div#content > div#list_item.active ~ div#menu > div#list_item_details {
display:block;
}
with the caveat that the ~ is looking for the sibling of div#content, not the sibling of div#list_item.active.
I'm using Sass, so those custom selectors are available.
If I understand your question correctly, you want to find siblings based on the parent (div#content) but only start with particular parents depending on their children (div#list_item.active).
If so, it's not possible in CSS Selector Level 3, but it's coming in CSS Selectors Level 4; you'll be able to select the subject of your operation/comparison. http://dev.w3.org/csswg/selectors4/#subject
In my HTML there are a lot of elements. Some div elements have an table as child element. I want to set some css properties to all div element, but differs between those with table and those without it.
My first approach:
The class property of those div-elements containing a table is set to something with 'table', so I can select them with attribute selectors as described here: http://www.w3.org/TR/selectors/#attribute-selectors
div[class*="Table"]
{
/* Set Properties for all div with 'table' inside class-attribute */
}
Unfortunately there seems to be no opposite attribute selectors.
So my first question is: Is that right or what can I do?
My next approach is, to check if one child is a table. With help of google I only find how to select e.g. first-child of an element, but not how to check, if it is a table or not.
So my question 2 and 3 is: How do I select those div elements, containing (or not containing) a table as child?
Edit: Usually the table would be first-child, but if possible I would like to check all child elements being a table or not
There is no way to target parent elements with CSS (2.1 or 3). The best you can do, is manually add a class to all of the div tags you want to target, or use JavaScript to write your selection criteria.
If you were to use JavaScript to do this, you could easily do so with jQuery, like this:
$('div > :first-child').not('table').parent().addClass('notables');
Working demo
Edit for comment: If you want to select a div that doesn't have any tables nested, you can use the following, with the jQuery :has() selector:
$('div:not(:has(table))').addClass('notables');
Working demo 2
Your approach of adding a class to <div>s that contain a table is the only way to do this with CSS.
There is the :not() selector if that helps with this approach. It’s unsupported by IE 8 and below and Opera 9 and below, but all other browsers support it.
You can get the same effect by setting styles for <div>s that don’t contain tables with the div selector, then overriding those styles for <div>s with the table class, but :not() might make it less verbose. Demo here: http://jsfiddle.net/LyLS5/
I have used CSS pseudo-element selectors like many others, mainly just to say I've used them.
But I am racking my brain and struggling to come up with a reason for their place alongside markup.
Take the following example:
<p>Hello</p>
p::after {
content: "*";
}
What is the advantage of using this over using <span> tags?
Am I missing the point of ::before and ::after? Is there some rock solid reason for using them over pre-existing semantic markup?
The CSS2.1 spec says this about generated content:
In some cases, authors may want user agents to render content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.
Basically the purpose is to minimize pollution of the content structure by "content" that is otherwise more suited as presentational elements, or better to be automated.
If you're talking about :before and :after: They're used as presentational elements for cases where adding more elements into the actual document would be mixing structure with appearance. A few cases I've seen:
Bullets in bulleted lists
Quotes around q elements
Stylish shadows
Decorations and the beginning or end of text
These particular pseudo-elements are designed to add “content” that’s actually just a visual aid.
The prime example is adding quote marks around the <q> element, which Firefox does using these selectors in its default stylesheet. Some people also use them to clear floats.
You shouldn’t use them for actual content, despite the name of the CSS content property, as non-visual user-agents (i.e. screen readers) should ignore them.
I’ve never come up with much use for them, although I did once use them to add little Unicode icons to hovered links on a personal site — like you, pretty much just to say I’d used them.
Honestly, the only worthwhile useage is to force elements to have the correct size in the dom. Use this code for example:
<div class="container">
<div>this div is floated left</div>
<div>this div is floated left</div>
</div>
Typically you would have to specify an exact or min height for the .container div. if you were to apply ":after" with some very simple css, any background you applied to the .container would actually show up (in almost every browser) properly, with few to no shims.
.container:after{
content:'.';
height:0;
line-height:0;
display:block;
float:left;
visibility:hidden;
}
Now try that example, applying a background color or image, and you'll see that the .container div always has the appropriate height (which would be the total combined height of the inner contents) even if all the inner html is floated (as is the case in most ul/li css buttons).
I also use an after on every div that I wrap all my content in per html page. This is due to the possibility that all of the content on a given page could be floated, and I want to make sure that my content div always has the correct size/padding with the appropriate background.
CSS3 Pseudo Selectors also include essential ones like :link, :hover, :active, :focus, :first-child, :nth-child. It's impossible to make a useful site without most of these.
As for the less commonly used pseudo-selectors like :after and :before, they're useful in certain cases where the content is dynamically generated and you want to insert something before a specific element or tag.