How to add class "bottom-post" to the post that is at the very bottom of my wordpress blogroll? I need to style it differently. (I can't use the static ID since the the post and the total number of posts are constantly changing)
You can add classes to elements with jQuery:
$(".post:last-child").addClass("bottom-post");
and then style like so:
.bottom-post {
/* Different styling */
}
A benefit of this method (compared to using pure css) is that this will apply the class to the element and allow styling even on browsers that don't support the :last-child css selector. I tested this on IE6-8 and it worked in all of them.
The following provides an explanation as to why the :last-child psuedo selector tends to be preferred over :last in this case:
http://api.jquery.com/last-selector/
You could use the CSS pseudo class :last-child to select the last post.
For Example:
.post:last-child
{
color: red;
}
Link me to your blog and I'll be able to give a working example.
Related
Is it possible to hide an element via css from HTML markup "data-post-id="226""? I'm in wordpress and on the portfolio I need to hide an element on several posts, but since it's automated I can't do it manually.
I tried .data-post-226 { display:none; } since that works for page and post id's, but this is a little different since the id is in quotes.
.classname only works for classes, not for other attributes. You can select by attribute with square brackets, though.
[data-post-id="226"] will work as a selector to style the element that das data-post-id="226" as an attribute.
You want to use the attribute selector here (More info: https://css-tricks.com/attribute-selectors/)
In your case, this is what you need:
[data-post-id="226"] {
display: none;
}
What you are looking for is attribute selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
If you are new to this, I would recommend you reading about various ways you can select your elements using CSS selectors - https://www.w3schools.com/cssref/css_selectors.asp
I am getting an html file as a string and I need to change the styling that are coming in to prevent it from changing the parent styling.
Instead of going through each style and changing it from
.inner-div{height: 50px;}
to
.outter-div .inner-div{height: 50px;}
on each element, I would like to do something like
.outter-div {
.inner-div{height: 50px;}
.inner-div2{height: 50px;}
}
however that does not work
Is there a way to have multiple attributes nested inside of another attribute, instead of having to add the parent on each attribute?
To do something like that, you'd have to use a CSS pre-processor.
Two popular candidates are Less and Sass.
Less and Sass extend CSS to provide extra features, including the ability to nest multiple attributes. This Less or Sass code is then fed into a pre-processor, which transforms it into standard CSS that a browser understands and can be deployed as part of your website or app.
Assuming the inner class names all start the same (with 'inner'), then this can be done with an attribute selector. like this:
.outer-div [class^=inner] {
height: 50px;
}
Demo
If this is not the case, then...use a CSS preprocessor like others have mentioned.
PS: just for the record...
CSS selectors level 4 has added the :matches pseudo-class in order to group selectors more easily.
The syntax looks like this: :matches( selector[, selector]* )
In your case, it would be:
.outer-div :-matches(.inner-div, .inner-div2 ) {
height: 50px;
}
You can read more about it this CSS-tricks post
NB:
Currently there is no browser support for :matches, however the :matches pseudo class was once called :any in the spec, supported with -moz- and -webkit- prefixes. See MDN on :any
Here's a working example for webkit using :any:
Codepen
There are tens of CSS rules I would like to be applied on a section of a page - this part is easy:
.generalStyles a,p,button,div.foo {
/* many styling rules here*/
}
However, when I mark a section of a page with class="generalStyles", I would like certain subsections not to inherit those styles, such as descendants of class="noGeneralStyles" (1). This should work with arbitrary nesting.
What I am looking for is a selector that could be translated into:
Inherit CSS rules if you are a descendant of .generalStyles, but not
when .noGeneralStyles is a closer parent
An interactive jsFiddle example can be found here
EDIT: The solution (if there is any) should not make any assumptions of inner HTML
(1) - the reason is there are way too many CSS rules to reset
You won't be able to limit or otherwise control inheritance chains using selectors alone, not even through combining :not() and descendant selectors for the reasons given here and here. You will have to provide an overriding rule for elements within .generalStyles .noGeneralStyles.
How about using direct descendant selectors? > means it will select button tag, which is direct child to an element having class noGeneralStyles or generalStyles
Demo
.noGeneralStyles > button {
color: black;
}
.generalStyles > button {
color: red;
}
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.
i would like to deselect and #id item from a selection without changing HTML or adding any classname,
lets say i want to emulate this Jquery sentence in CSS
$('img').not('#thisone').CSS();
is it possible?
Use CSS3's :not() selector (which has an equivalent jQuery selector):
img:not(#thisone) {
}
If you need better browser support, there's always the fact that ID selectors, being the most specific simple selectors, are good for overrides:
img {
/* All images */
}
#thisone {
/* Revert styles for this particular image */
}
This might help
http://www.w3.org/TR/css3-selectors/#negation
(Jquery does that internally anyway, I think, didn't check, though).