This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I know this is a shot in the dark, but is there a way, using css only, CSS2, no jquery, no javascript, to select and style an element's ancestor? I've gone through the selectors but am posting this in case I missed something or there is a clever workaround.
For example, say I have a table with classname "test" nested inside a div. Is there some sort of:
<div>
<table class="test">
</table>
</div>
div (with child) .test
{
/*styling, for div, not .test ...*/
}
There is no such thing as parent selector in CSS2 or CSS3. And there may never be, actually, because the whole "Cascading" part of CSS is not going to be pretty to deal with once you start doing parent selectors.
That's what jQuery is for :-)
You can use has():
div:has(> .test) {
/*styling, for div, not .test ...*/
}
In CSS there is an :empty selector that allows you to match empty elements, you can negate the effect with :not selector.
div:not(:empty) {
// your styles here
}
However I'm not sure if all browsers support this.
div:not(:empty) {
margin:0;
}
is NOT recognized by http://jigsaw.w3.org/css-validator/ as CSS2
it's the purpose of CSS to "cascade" down from the more containing to the more specific elements. I guess it's possible for you to "reverse your logic", like in
div.myclass { /* format parent */ }
div.myclass * { /* neutralize formats in descendants */}
div.myclass img { /* more specific formats for img children */ }
good luck
Mike
:empty pseudoclass supported by Firefox, but is not compatible with IE.
But a very simple jQuery workaround for IE is at http://www.webmasterworld.com/css/3944510.htm . Saved my bacon
Related
When the child element span.icon-hamburger in the below code receives a :focus state, I am wanting to change the styling of the li element. Using a SASS solution, I read that #at-root could work here. I am unable to find a SASS solution for this use-case using #at-root, however. What are your thoughts for this use-case?
HTML:
<ol>
<li>
<span class="icon-hamburger"></span>
</li>
</ol>
CSS/SASS:
.icon-hamburger:focus {
#at-root ol li #{&} {
background-color: #fff;
}
}
There is no solution for IE and Edge but for Chrome and Firefox you can use :focus-within CSS pseudo-class.
The :focus-within CSS pseudo-class represents an element that has
received focus or contains an element that has received focus. In
other words, it represents an element that is itself matched by the
:focus pseudo-class or has a descendant that is matched by :focus.
(This includes descendants in shadow trees.)
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
From this excellent answer by Dan Herbert:
There is currently no way to select the parent of an element in CSS.
If there was a way to do it, it would be in either of the current CSS selectors specs:
Selectors Level 3 Spec
CSS 2.1 Selectors Spec
In the meantime, you'll have to resort to JavaScript if you need to select a parent element.
N.B., there's some discussion over the possibility of doing so in CSS4.
This question already has answers here:
:first-child not working as expected
(5 answers)
Closed 7 years ago.
I have tried to use :nth-child(n), which does not work as well, am I using this selector on the wrong elements?
on the element div with the following class, block_photo.
.block_photo:first-child, .block_video:first-child {
margin-left:0px;
}
http://tmptstdays4god.ucoz.com/
Your html markup is the following:
<section class="new photos">
<h4 class="title">...</h4>
<div class="block-photo">...</div>
<div class="block-photo">...</div>
...
</section>
first-child / nth-child
Matches an element if it is the first child.
.block_photo:first-child {
/* styles here apply to the .block_photo IF it is the first child */
}
In your case, because the first child is <h4>, the selector .block_photo:first-child matches no element.
first-of-type / nth-of-type
Matches the first element of a certain type
.block_photo:first-of-type {
/* styles here apply for the first .block_photo element */
/* that is what you need */
}
References:
W3C specification on first-child
W3C specification on first-of-type
I know it is strange, but how can I select all the IMGs in a document which don't have a source (I am talking about the CSS selector)
That is, I want to select
<IMG>
but not
<IMG src="/my_file.png">
The answer is
img:not([src]) {
/* style here */
}
You need to use :not selector
img:not([src]) {
/* style here */
}
I want to override another style sheet and set the float for all elements to none. If I use 'div, span, a' as the selectors or even 'body div, body span, body a', it doesn't override the previous class selector. I could use !important but this isnt great for obvious reasons.
.class {
float: left;
}
/* my overide */
div, span, a {
float: none;
}
Note- in the code ive only shown the class of 'class', but actaully their are many classes and id's.
Is there a way to do this without using !important? The reason im doing this is im mobile optimizing my site with media queries. I need to remove absolute positioning, floats, etc for all elements, but then i will want to add some of these styles to specific elements.
Thanks
As I wrote in my comment above:
Using the * selector is generally ill-advised. Selectors focus on the
key selector first (the right most selector) and so using the *
selector means that the browser must find all elements on the page.
This is a huge performance issue.
You can read more in this answer: (why) is the CSS star selector considered harmful?
Rather than using the * selector as you have, I'd stick with targetting the elements you want to affect, specifically.
Chances are, there will only be a few types of elements in your page that are floating.
These are usually some divs, perhaps some images, a list or two?
div, img, ul, ol{
float:none;
}
If there's a few more you can include them also.
#jdin; for overide the .class float just write like this:
div.class, span.class, a.class {
float: none;
}
EDIT:
Define an ID in your body tag like this
HTML:
<body id="home">
<div>Tag</div>
<span class="class">Class</span>
<div id="id">ID</div>
</body>
CSS:
body#home *{background:pink;border:1px solid #000}
Check this example http://jsfiddle.net/sandeep/D7Sg6/2/
Hello is there a way with css to style the 2nd element on page with the same class slightly differently to the first.
For example I have two ul's on a page with a class of topbardropdownmenu. I want to give the 2nd ul a differen't background to the first. Is there a way to do this with out altering the html?
You can do it with the :nth-child() pseudo-selector. It is CSS3 though, and not supported in some browsers (e.g. <=IE8 & <=FF3.0 doesnt support it).
.topbardropdownmenu:nth-child(2) { background: #FF0000; }
You could do it with JavaScript in a cross-browser compatible way though, if that's an option for you.
What holds the <ul> elements? I'll assume a <div id = "lists">
/* First element */
div > ul.topbardropdownmenu:first-child{
}
/* Rest of the elements */
div > ul.topbardropdownmenu{
}
...alternatively
div > ul.topbardropdownmenu:not(:first-child)
It depends which browsers your users are using, you might be able to use the nth-of-type css pseudo-selector:
ul.topbardropdownmenu:nth-of-type(2) {
/* styles the second ul of class=topbardropdownmenu
}
If there's a particular pattern to the occurrence of these ul elements, you could use descendant and/or sibling selectors:
div > ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that are the immediate descendants of a div */
}
p + ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that immediately follow a p */
}
Look at the CSS3 nth-child() pseudo-class.
You can use :nth-child http://css-tricks.com/how-nth-child-works/ but IE may struggle with it. Consider this jQuery alternative:
$(".class").eq(1).css();
http://api.jquery.com/eq/