I have to select all the elements of html ( from * ) except the children one specific div.
how can I make use it of :not of css3 ?
(*) - children of (#myDiv)
You can't do that, as the selector to find any child of #myDiv would be
#myDiv > *
But that's not a simple selector that could fit in :not().
Your best bet is to apply styles to * and override (or "revert") them in #myDiv > *:
* {
color: red;
}
#myDiv > * {
color: black;
}
jsFiddle preview
This should work:
:root, :not(#myDiv) > *
The first part there will match the root element. The second part will match anything with a parent as long as that parent is not #myDiv.
Related
Can something like this be written using the :is() pseudo-class?
div p,
div p::before,
div p::after {
/* selectors */
}
I tried this but it didn't work:
div :is(p, p::before, p::after) {
/* selectors */
}
No you cannot.
Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within :is(). ref
In css I know you can select elements beneath their parent with the > selector:
#myDiv > p {
line-height: 1;
}
Is it possible to do the same for elements with a certain set of classes beneath that element, eg:
#myDiv > .classA .classB {
line-height: 1;
}
So that any child element with classes .classA .classB will get the treatment?
I've tried this and it doesn't seem to be working, and am not sure if I'm going down the right path or if I'm close.
This is a limitation of CSS that you have to repeat your self by doing
#myDiv > .classA, #myDiv > .classB
as your selector. Most CSS preprocessors can make this less of a challenge to keep things DRY.
Yes, you can - but you have to follow the rules. A space character is also a descendant selector, and that's not what you want. If you want to select all descendants that have both classes, try:
#myDiv > .classA.classB {
line-height: 1;
}
If I have 2 elements side-by-side in the DOM like this:
a.button
div.container
I want to target a.button if div.container has class div.container.fullscreen
I was thinking something like this:
div.container.fullscreen + a.button { display:none }, but it does not work.
Any suggestions?
+ won't work as it's the next sibling selector.
Your selector div.container.fullscreen + a.button would target the a if that was the next immediate sibling of the div, e.g.
div.container.fullscreen
a.button // this is now targeted
div.container.fullscreen ~ a.button won't work either as that'll select all the siblings after, and not before.
a.button // this isn't targeted.
div.container.fullscreen
a.button // this is now targeted
a.button // so is this
Sadly, there is no previous sibling selector to achieve what you want using pure CSS.
The E + F syntax only matches if E precedes F. If they are ordered like you just described, I don't think you can style the a with pure CSS.
You might simply change the HTML to put the fullscreen class on the parent container of both container and button. That way, you can use the following declarations to style:
.fullscreen > div.container {
/*
any fullscreen modifications to be done, what used to be in div.fullscreen
*/
}
.fullscreen > a.button {
display: none
}
missing your real html. <a> has an href attribute ? Is it targetting <div> ?
Button doesn't have necessary to be hidden if it stands hidden under div once full expanded , it 's being hidden by div itself.
Form elements can help see idea in action :
http://codepen.io/gcyrillus/pen/otFim
Instead of doing the following to give a text color to all elements on the page:
* {color: red;}
Is there a way to only apply it to all elements within a certain id? Something like this:
#container * {color: red;}
Actually yes, exactly like you mentioned.
#container * { color: red; }
#container * {color: red;}
Should work.
If you only want direct children to get the class, try
#container>*{color: red;}
What browser are you using? (brand + version)
I would have thought:
#container * {color: red;}
Should work.
For your example, can you use jQuery?
$('#container').children().css('color', 'red');
EDIT: I was indeed wrong, serves me right for trying to answer on my lunch break with half a sandwich in my hand -.-
We would be able to provide a much better solution if we were to see the HTML code as a reference.
What you are looking to do is use CSS selectors. (CSS Selectors
And it sounds like Attribute selectors may be an option for you. Attribute Selectors
For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value:
h1[title] { color: blue; }
In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":
span[class=example] { color: blue; }
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/