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
Related
In my wordpress site, the numbers of my div ids for "chimp-button-*" keep changing automatically. Rather than needing to add a new div id each time it changes, is there a way to use a wildcard to capture all div ids starting with chimp-button?
Here's what I have:
#chimp-button-7, #chimp-button-6, #chimp-button-5, etc... {
position:relative !important;
}
I'm wanting to do something like this...
#chimp-button-* {
position:relative !important;
}
Sorry, I'm a CSS noob.
You can select these elements with an attribute selector, so [id^="chimp-button-"] would work, however it would also be a poor approach to managing styles.
Instead of trying to select elements based on the an ID pattern, give all these elements a common class attribute, such as class="chimp-button", you can then select all the elements with .chimp-button.
This is called to attribute-selectors
Used to this
[id^="chimp-button-"],
[id*="chimp-button-"]{
// here your style
}
More info attribute-selectors/
What you need is called attribute selector. An example, using your html structure, is the following: div[class*='chimp-button-'] {color:red }
In the place of div you can add any element, and in the place of class you can add any attribute of the specified element.
See demo
See here and here for more information on CSS attribute selectors.
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;
}
I've inherited the following CSS code to initially hide the latter elements of a series of paragraphs and a series of list items.
.profileSection p:nth-of-type(n+2) {
display: none;
}
.profileSection li:nth-of-type(n+6) {
display: none;
}
Obviously, this code does not work in IE8. What is an alternate way to hide these elements?
Here is a discussion on it:
http://www.thebrightlines.com/2010/01/04/alternative-for-nth-of-type-and-nth-child/
The writer mentions that you can reference specific children element by using
tagname + tagname + etc
Or get generic children by using
* + * + etc
I personally would just add a special class to those items.
+, the adjacent sibling selector, would allow you to select all siblings which are immediately adjacent. In your case: .profileSection p+p. (If you must do this, consider wrapping it in something to prevent other browsers from seeing it, like conditional comments.)
But + won't help if your markup contains something other than <p> elements right next to each other. For example:
<p>Alpha</p>
<h4>Header</h4>
<p>Beta</p>
If you don't already have some kind of shiv or moderizr functionality on the site (which would help with many other similar issues), it would be easiest to add a special class to the elements, and select using that class.
You can also try downloading and including selectivizr, which makes css3 selectors work in IE6-8
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.
Is there a way in CSS to select an element which has a sub-element with given class?
I want to apply a style to a <ul> list that has <li> with a particular class.
This isn't possible with css, since you're working against the cascade by selecting an ancestor based on a descendant.
The best I can offer and suggest is a jQuery approach:
$(document).ready(
function() {
$('.givenClassName').parent().addClass('something');
}
);
This finds the element with the givenClassName and then selects its parent element and adds the class something to that element.
#Blaenk suggests an alternate approach, which is more versatile (his approach doesn't require the ancestor element to be the parent of the element you're selecting by).
Obviously other JS libraries, and JS all by itself, can achieve the same effect, though I can't offer particular advice, since I'm still only just familiarising myself with JS and mostly with jQuery (why yes, I am ashamed of myself...).
As far as I know, this is unfortunately not possible with CSS.
If you can use Javascript though, jQuery has a nice way of doing this using the closest() method. The documentation for it even lists an example very similar to yours: selecting a ul that has an li of a particular class.
$("li.some-class").closest("ul");
Forgive me if this is not the best way to do it in jQuery. I'm actually new to jQuery and this is one of the methods I've learned so far, and it seemed fitting.
No. The CSS Cascade does not allow for this kind of selector.
The best solution in this case would be either to modify the DOM with JavaScript or to change up the resultant HTML to add classes to the ul tags.
ul li {
/* styles */
}
Is this what you're asking for?