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?
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 facing issues writing a slightly complex CSS selector.
I want to select a div with "class" containing 'btn-group', but not 'open'
So I have something like;
div[class*='btn-group']:not([class='open'])
Now the issue is that there are around 5-6 elements that match the above condition. But I want to select the first out of that. How do I do the same?
Would prefer doing using nth-child..
What about: div[class*='btn-group']:not(.open):first-of-type?
[Edit]: This trick does not work if you have <div class="btn-group open"></div> as the first child... (as explained by #Jukka below) a JS-based trick will work, tho:
$("div[class*='btn-group']").not(".open").first()
.css({...});
// OR add a class
// .addClass("class");
http://jsfiddle.net/teddyrised/LdDCH/
try like this
div [class*='btn-group']:not([class='open']):nth-child(1) {
color:Red;
}
Using this you can select first child
Working Fiddle
You cannot. CSS selectors can’t be used that way. But if you provide a more specific HTML context (including containers for the div elements and a description of a pattern that the markup follows), there might be a way that works under some assumptions.
In particular, :nth-child and :nth-of-type only test whether the element is the *n*th child, or the *n*th child of its kind, of its parent. It does not take e.g. classes into account; the is no “nth of a class” selector.
Is it possible to use attribute selectors to partially-search an inline style attribute?
Can anyone find a way to get this bit of code working?
http://jsfiddle.net/v4xPY/1/
It seems that it's not possible to do this .hidden[style*="display: block"] + .below, nor even just [style]
The attribute selector you're trying to use isn't legit CSS, though it is a jQuery attribute selector. As far as I know, CSS is limited to [attribute=value], [attribute~=value] and [attribute|=value]. (derp, see below)
But, since you're already using jQuery to toggle the hidden div, it'd be a lot simpler to just toggle a class on the below div at the same time, rather than wrestling with the attribute selector (unless there's more to it than that).
Modified jQuery:
$(function() {
$('html').click(function() {
$('.hidden').slideToggle();
$('.below').toggleClass('yellow');
});
});
and CSS:
/* Margin of Below should reduce when hidden is opened */
.yellow {
margin-top: 10px;
background: yellow;
}
Fiddle here.
Edit: Okay, I was way off on the bit about the attribute selectors, it is legit CSS3; I don't know the details on browser support, though I'd guess it'd be supported in all the usual "modern" browsers. Also, there's apparently a problem with IE7 targeting the style attribute specifically. There's a pretty good write-up at http://www.impressivewebs.com/attribute-selectors/.
Once more: Though I can't find anything that explicitly confirms this, it looks like the attribute selectors only apply to attributes that are actually hardcoded into the html; basically it's just parsing strings, not examining the dom elements' "states" as such?
I am trying to use one CSS class to many DIV. Is it a good practice? or else are there any disadvantages of doing that. because in VS it says "another object already uses this ID", not an error message but a warning.
CSS classes are meant to be reused. CSS IDs are meant to be used uniquely on a component. Are you sure you're using a css class?
There is nothing wrong with styling multiple divs at the same time. This is actually expected and not many people do that. To style all divs;
body {Body Code Here;}
div {Div styling here;}
Styling all div's with one class;
body {Body Code Here;}
div.YourClass {Div Styling Here;}
Notice how there is no space between the div and selector(.) That specifies a class in any div where as div .YourClass will search in all divs for a class. IDs are different than Classes, you can have multiple Classes on the page but only 1 ID on the page. To fix that message, make sure you are using Class instead of ID and search the page for that ID and if it comes up twice or more, thats your problem. Again Classes are reusable and IDs are single-element selectors. Hope I helped!
In css, class is meant to be reused, so it is ok. In case you don't know about id, id in css is meant to be used noce. But nowadays, I've seen few people use class all over place even they just use it once. So, just keep your markup and styling clear, use class or id in your way if you work alone [ personal project ] and keep it persistence when working alone or in a team.
html
<div class="class1 class2">afd</div>
<div class="button class1">asffsdf</div>
css
.class1 { /* styling your class1 here */ }
It is absolutely fine to use the same class for many elements in CSS. Be careful not to do the same for the "id" attribute, which really should only be used for a single element as it is considered a unique ID.
You can use same CSS class for any number of elements, but ID must be unique for each and every element in the page
ID is somewhat different from class. You can have multiple classes on page but ID should only be used once. Do follow best practices :)
i know... this information is not what exactly you want as answer but may be of some little help :)
example:
div.className { } //covers all div with a particular classname
While there exist selectors to select items preceded (#hlinks+#hsearch) or owned (#topbar>#hlinks) by other items, there's no way to do the opposite.
For example there isn't something like
li:has(ul){ }
To detect list items that have other lists within them. Wouldn't that be convenient?
AFAIK, the feature is not even in the plans for CSS, so my question is: why is this so?
This is generally called a "parent selector"; as you say, they don't exist in CSS, though they could be useful.
There's an interesting discussion here; the summary is that they would have a large negative effect on performance and would allow people to make mistakes with large consequences. People who understand these things seem to think that these issues can be overcome, but there hasn't yet been sufficient demand for someone to actually do it.
You're referring to the concept of a "parent" selector - selecting the parent element under a particular condition. You're correct about this feature not being present in CSS (not event CSS3) - to my knowledge, it not possible at the moment to the way the DOM is parsed by CSS. However, this feature is available using jQuery and the :parent selector or the :has selector, which it seems you may be familiar with already.
EDIT: For a tremendous amount of detail on the idea of a parent selector, see http://shauninman.com/archive/2008/05/05/css_qualified_selectors.
This is standard in CSS since...uh.... the beginning of CSS.
It's just a space:
li ul means any ul that is inside li
If you want to do that just do:
ul li ul li {
}
So now you are searching for any list-item that has an unordered-list inside of it with a list item.