How to apply css to div which has no class? - javascript

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

Related

hide second div of a particular p tag using css

I want to hide the second div after this div, there is no identifier for that div.
That's why I took this p tag attribute as an identifier. I tried using jQuery, but in page load it's sometimes visible. Is there any way to hide it permanently?
div p[data-udy-fe="text_-a91032"] {
}
I'm adding my jQuery code here, but when page loading we can see the div's content for some seconds. I need to hide it permanently, without the brief flash.
$("p").each(function(){
if($(this).attr('data-udy-fe') == 'text_-a91032') {
$(this).next('div').next('div').hide();
}
});
You can use + div + div selector
p[data-udy-fe="text_-a91032"]+ div + div {
display: none;
}
<div>
<div>Paragraph1</div>
<div>Paragraph2</div>
<p data-udy-fe="text_-a91032">Paragraph3</p>
<div>Paragraph4</div>
<div>this one is not displayed</div>
<div>Paragraph6</div>
<div>
You can use the general sibling combinator to select the p tag which occurs after your specific element.
div p[data-udy-fe="text_-a91032"] ~ p {
display: none;
}

CSS assign class to child elements that are not a specific type

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

Change CSS value dynamically with jQuery

I have a div:
<div class="badger-left"></div>
This CSS:
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
background-color: attr(bg-color);
}
This jQuery to add an attribute and a class:
$('.badger-left').addClass('badger-change').attr('bg-color','red');
Since jQuery can't do :after like in CSS, I thought of this way, but it's failing. What should I try?
Thanks
Edit: The color would change dynamically from jQuery, it won't always be red.
So, you can't pass it in to a color value because it will be interpreted as a string instead of a reference. You can pass in the content value to prove this point. On that note, you'll need to give your :after some layout, either with content or with some display or dimensions.
Here is a hacky workaround. I would personally refactor this to not use the pseudo style, but this will work with your current implementation:
function addStyle(color) {
$('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}
// example addStyle('red');
Working Demo: http://jsfiddle.net/3qK2G/
How about just changing the class of .badger-left? So do something like this:
$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')
with css like this:
.badger-red:after {
background-color: red;
}
.badger-blue:after {
background-color: blue;
}
what you can do is to set background-color in .badger-change and have .badger-change:after inherit this value.
In .badger-change you need to set a background-color and hide it width a gradient over it.
DEMO (hover the div to see it in action)
DEMO 2 only change background-color without switching classes.
You can think of other method with inherit , like a background image of 1 pixel set hundreds of pixel away from screen in parent container and setted as repeat in pseudo-element.
Establishing a color in your CSS prior to it being added would do the trick. Then changing that classes color later would change the badger-left with the new class badger-change
CSS
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
background-color: red;
}
jQuery
$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class
$('#button').click(function(){ // When example button is clicked
$('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue
});
Here we are using a button for an example of changing the color.
HTML
<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />
Some example content for badger-left for example.
When the page loads badger-left is given the new class badger-change with the BG being red. Then the button fires the jQuery to change that classes BG color to blue.
JSFiddle Example

CSS: Hiding another div

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

display:none not changing behavior of css

Here is a simple example of some markup I have:
HTML:
<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
<li>Hi</li>
<li>Bye</li>
</ul>
The checkboxes are used as filters to remove <li>s with certain tags. This all works fine. My issue is that when the checkbox is checked and the filter logic runs, it uses a display:none to remove the specific <li>s but the css I use to format doesn't get applied correctly after the fact. For example, let's say clicking the first checkbox removes the first <li> and the 'bye' <li> is the only one left. That will work fine, but the border I have defined in the css persists even though the selector shouldn't match it anymore. This is the selector I used:
CSS:
#columns .calendar td ul.reveal li + li {
border-top: 1px dotted #999;
}
This style is applied correctly at first, but after the display:none is applied and the 'bye' li is the only li left it will still have the dotted border.
I've used the browser developer console to check and this is indeed the only style rule that is being applied to create the border.
I've read something along the lines of display:none not repainting the DOM, and to access a variable that forces the browser to repaint (something like $('whatever')[0].offsetHeight) but this does not seem to fix my problem.
jQuery Based Solution
CSS rules by themselves will not work since the DOM is being manipulated by JavaScript.
What you could do is use JavaScript to identify the first li element left in the list.
For example:
$('ul.reveal li').filter(':first').addClass('first-child');
where the CSS rules are:
ul.reveal li {
border-top: 1px dotted #999;
}
ul.reveal .first-child {
border-top: none;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BXMaB/
The jQuery action picks out the first li element in each ul list and then applies a CSS rule to know out the top border that appears on all li elements by default.
You would need to apply this jQuery action when ever a check box (event) is checked, in addition to binding it to the document load event.
The CSS selector you have chosen is interested in the structure of the DOM rather than what is and isn't painted. Selector S + S will still apply to S2 even when S1 is being removed, which is why it's still getting a top border.
Given that you are able to manipulate the DOM I would suggest either removing and re-adding the element itself or writing a selector that will respect a class added to S1 (which also applies display:none to it).
For instance:
selector:not(.hidden) + selector { [Only works in IE9+] }
or
selector.active + selector.active { [Works in IE7+] }

Categories

Resources