I am aware of the + selector that allows us to manipulate an adjacent element, but I'm looking to manipulate all of the elements rather than just one.
<article class="non-selected"></article>
<nav id="nav-below"></nav>
<article class="select-me"></article>
<article class="select-me"></article>
<article class="select-me"></article>
<footer class="dont-select-me"></footer>
In the example above I'm trying to select each of the article's with the select-me class. (I can't use a normal class selector).
Is this possible for jQuery?
Use the general sibling combinator:
.non-selected ~ .select-me {
color: red;
}
Example: http://jsfiddle.net/XFGfd/5/
You have to use ~ instead of +, all following elements will be matched
For exemple,
article.non-selected ~ article.select-me{} /* will select all articles having .select-me class that are siblings but after a article having the .non-selected element class */
Using jQuery
$('article.non-selected ~ article.select-me')....
jQuery: LIVE DEMO
$('#nav-below').nextUntil('.dont-select-me') // do something
http://api.jquery.com/nextUntil/
Or using CSS General sibling combinator (~): LIVE DEMO
#nav-below ~ article{
background:red;
}
Related
I have a <header> with the class .header and [data-header-style="Standard"].
Now I want the <main> element of my page to have a padding of 100px, but only if the header has [data-header-style="Standard"].
Is this possible without Javascript? Thank you for the help!
I know that I can select the header with [data-header-style="Standard"].header, but unfortunately not how to do it with <main>.
I'm assuming your HTML looks something like this:
<header class="header" data-header-style="Standard">
...
</header>
<main>
...
</main>
You need the CSS general sibling combinator (~), which you can use like this:
[data-header-style="Standard"].header ~ main {
padding: 100px;
}
This selects all main elements that follow your header. In this case, it will select your main element and give it the 100px padding, but only if the header matches the first selector.
You can read more about the general sibling combinator on MDN. There's also an adjacent sibling combinator if you'll ever find that useful.
Suppose I have a DIV element whose id is mydiv.
<div id="mydiv">
<div></div>
<span></span>
<p></p>
</div>
I want to assign a CSS class to only those direct descendants of this div that are not span elements. So in the above example the class should be assigned only to the child div and p elements. How do I accomplish this using CSS (not Javascript)?
You can use :not:
#mydiv > *:not(span){
color: #f00;
}
JSFiddle
Note: You are not assigning a CSS class, you are applying a group of CSS styles to a particular selection.
You can't "add a class" with CSS, but you can select elements and apply style to them if that's what you mean.
#mydiv > :not(span) { /* apply style to direct descendants that aren't span */ }
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot
I am creating some design part in HTML. I have two div. Both div element are generating through java script. First div has a class and second div has no any class or id. I want to apply style to second div.
<div class="class_name"></div>
<div style="display:block;"></div>
After applying style the second div style will be style="display:none;"
Please suggest.
You can have CSS only solution for this, there is no need to have a javscript for this you can try adjacent siblings selectors of CSS:
To target very next div you need this:
.FirstClassName + div{
/*your style goes here */
}
To target all divs in a parent after a given class name:
.FirstClassName ~ div{
/*your style goes here */
}
Demo
You can use :not selector for the second div:
div:not([class="classname_of_the_first_div_here"]){}
or even simpler :
div:not(.classname_of_the_first_div_here)
Assuming that there were no other div before the two div elements were created:
document.getElementsByTagName("div")[1].style.color = "blue";
use style attribute in the second div
<div id="div1" style="display:block;"></div>
if it has only two div's then use the last-child property.
yourparent div:last-child
{
your style
}
You basically have three options (maybe more, but then we need some code).
First one, use the element selector. but that means you're styling all elements of the same type on the page
div { background: red; }
Second option, style all divs that have no class attribute:
div:not([class]) { background: green; }
and last but not least, style a div that is a child of another element. If your document structure is build up properly this is most probably the way to go.
div.parent > div { background: blue; }
Checkout the Fiddle here
I have a parent div in my code, and 2 child divs. I want that on hovering the first child, the second child to hide. I want to do that only with css or js.
Here's my Fiddle
<div class="parrent">
<div id="child1">
Hide child2
</div>
<div id="child2">
I must hide
</div>
</div>
Thank you!
Use this:
#child1:hover ~ #child2 {
visibility:hidden;
}
Demo
This uses the General sibling combinator ~
~ selector: The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.
You can also use the Adjacent sibling combinator +, depending on the rest of your code.
+ selector: An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
#child1:hover + #child2 {
visibility:hidden;
}
Demo
#child1:hover #child2 {
visibility:hidden;
}
This will not work as now you're saying that #child2 must be a child of #child1.
What you can do is this:
$(document).ready(function(){
$('#child1').hover(function(){
$('#child2').hide();
}, function(){
$('#child2').show();
});
});
Or use the CSS code:
#child1:hover ~ #child2 {
visibility:hidden;
}
You can use below jquery code:
$(document).ready(function(){
$('#child1').on('mouseover',function(){
$("#child2").hide();
}).on('mouseout',function(){
$("#child2").show();
});
});
Before doing this you should know how to refer to a sibling element of an element in CSS.
instead of the following syntax-
#child1:hover #child2
You need the following:
#child1:hover+#child2
Fiddle demo
N.B. Basically + is for a reference to a sibling
Reference
I have a HTML page containing some hardcoded/static text.
The text string does not have any class/id/name. It's just there.
How to hide it on page load?
P.S: I really hope this is not a repeat question. I have done my 'homework'.
You can hide an element that doesn't have any direct identifiers by using a CSS selector which examines structure. You didn't post your markup, so it's impossible to give an exact solution.
Example 1
HTML
<body>
<section>
<div>Div I want to hide</div>
</section>
</body>
CSS
SECTION > DIV { display: none; }
There are many permutations of this pattern and many selectors available.
See: CSS2 Selectors (very wide support) and CSS3 Selectors (supported in most newer browsers).
Example 2
Here's a more complex example:
HTML
<div id="foo">
<ul>
<li>Hide this item</li>
<li>Don't hide this</li>
<li>Don't hide this</li>
</ul>
</div>
CSS
/* hide the first child of any UL which is a direct descendant of #foo */
#foo > UL > LI:first-child { display: none; }
In CSS, display: none? That'd be the easiest way. Or you could go with javascript once the page has loaded.
If you're talking about doing it with javascript, you would have to do a window.onload and set the style.display = "none"; but that would require an id/class/some way to reference it (there are ways to reference it without them but it's a lot better style to just give it an id/class. The function would look something like this.
window.onload = function() {
document.getElementById("text").style.display = none;
};
where your string has an id of "text"
Although if you are determined to have the text just appear as none on startup, why not just set the style/css to originally to have a display of none?