i wanted to know if in css there is a way to inject a display none to the relative of an attribute es;
<div class="classeA">
<div class="classeB" data-userid="1234" >
</div>
</div>
what should i use?
[data-userid="1234"] < .classeA{
display:none !important;
}
what should I do?
I want class classA with display none selecting the data-userid attribute
You could consider using :has(), although as of yet there is no support across any browser.
It would look something like this:
.classeA:has([data-userid="1234"]){
display:none;
}
Demo:
$('.classeA:has([data-userid="1234"])').hide();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="classeA">
<div class="classeB" data-userid="1234">
</div>
</div>
Related
what I want is that div with id makeMeWork to be visible only when div with id clickMe is clicked.
the fiddle link.
html:
<div class="showhim">Press ME<div class="showme">Working</div></div>
<div class="showme" id='makeMeWork'>Not Working</div> <div class="showhim" id='clickMe'>Press ME</div>
css:
.showme{
display: none;
background-color:red;
width:200px;
height:50px;
}
.showhim:active .showme{
display : block;
background-color:green;
}
I want this done purely through css as js and HTML part can no longer be modified.
I guess the major problem now is, there is no way to select previous child in css,
similar questions : is-there-a-previous-sibling-selector and show-div-on-hover-with-only-css
do something like this
demo - http://jsfiddle.net/tbnsoc3y/
wrapping your content in div for eg like i have done
<div class="cont">
<div class="showme" id='makeMeWork'>Not Working</div>
<div class="showhim" id='clickMe'>Press ME</div>
</div>
Right Now There is No previous selection of sibling available but it will be soon in css4 which has been drafted in w3c and they are working on it , ill tell use jquery or css hack !
Read the article
In the following markup, I want to apply css to only div with class .box which comes immediately after the .wrap. If it comes after the <p> or any other class than the .wrap, I do not want to select it.
<div class="wrap">
<div class="box">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
I have tried to look the adjacent sibling selector, but does not seem to work in this case.
.wrap + .box{
background: red;
}
JSFiddle: http://jsfiddle.net/8fjuz7sm/
I cannot use :first-child as it can occur only once too.
Write:
.wrap .box:first-of-type{
background:red;
}
DEMO here.
OR
.wrap .box:nth-of-type(1){
background:red;
}
DEMO here.
as #Hiral says, you'll have to either use first-of-type or nth-of-type(1).
If you cannot do this, but have access to the html, you'll have to add another class to the elements you wish to apply the class on, such as
<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
or you can use javascript and/or jquery to select the first element then apply styling via javascript.
Jquery Example
$(".wrap .box").eq(0).css("Background-color","red")
I edited your JSFIDDLE : http://jsfiddle.net/8fjuz7sm/4/
I recommend using jQuery for this because older browsers may not support the pure css solution :
create a new class :
.wrapperbox {
background: red;
}
Then add this jQuery code to your script :
$( ".wrap > .box:first" ).addClass( "wrapperbox" );
After this every html element with the class wrap which has a child box will get a class wrapperbox and there you can do your css
When you dont want to do jQuery you can use this :
.wrap .box:first-of-type{
background:red;
}
It will select the first child of wrap with the class name box and then do your css
I have two divs side by side. When a hyperlink's state is active (when it's clicked), I want to hide the div to the left, using display: none;.
I did this about a year ago, but since this is my first site since then, I can't remember how I did it.
I know it can be done in CSS alone, using :active but just not sure how anymore. How can I do this?
Use the "general sibling" selector ~ in conjunction with a:active
HTML
Click Me
<hr />
<div class="foo"></div>
<div class="bar"></div>
CSS
a:active ~ .foo {
display: none;
}
It basically says: find the div with a class of foo that's a sibling of the active anchor and hide it. Not to be confused with the adjacent sibling selector, +
View the demo here: http://jsfiddle.net/DNy2B/
I am not sure if I understood your question correctly but if it is what I think you asked then do this
<div style="display: none;">
I am learning HTML, so I am kinda new and this might not be what u asked but I wanted to help so yeah :)
This will hide/show the div when the link is clicked.
<html>
<head>
<title>Title</title>
<script src="jq.js"></script>
<script>
$(document).ready(function() {
$("#link").click(function() {
$("#div2").toggle();
});
});
</script>
</head>
<body>
<div id="div1">
div1
<a id="link" href="#">hey</a>
</div>
<div id="div2">
div2
</div>
</body>
</html>
Here's some code:
<div id="one">
<div id="two">
<div class="cell_pad">
</div>
</div>
</div>
How to tell to css, that you have to change value of class "cell_pad" which is in id="one"?
.cell_pad is repeated a few times in code, but I've to change one occurence of this class.
I'm using sparky framework for joomla.
I've tried like that in my stylesheet, but it doesn't effect:
#one > .cell_pad{}
you should use
#one .cell_pad{}
that Selects all .cell_pad elements inside #one elements, you sould take a look here http://www.w3schools.com/cssref/css_selectors.asp
You should use this :
#one .cell_pad
{
}
This will select all the .cell_pad elements in #one element
Good day guys! I'm a newbie here and I'm just wondering how to use div id and div class. Let's say for example, I want to have many div boxes in my site with all the same styles in each box. Is this the right thing to do? Please enlighten me.
HTML:
<div id="body">
<div id="box1" class="style"></div>
<div id="box2" class="style"></div>
<div id="box3" class="style"></div>
//(and so on)//
</div>
CSS:
.style {
//(put elements here)//
}
There is not really a right thing to do as everything depends on the situation and circumstances.
Why would you think that this would be the "wrong" thing to do? This cuts down on the amount of code you have to write, so it is favorable, correct?
You can also use the IDs you have to override styles for the <div>s individually:
.style {
color: red;
}
#body1 {
color: blue;
}
Due to the fact that elements, IDs, and classes each have difference selector precedence, I advise against using anything except for classes and psuedo-classes no matter how attractive other prospects may seem. If you're disciplined about it, your CSS will be easier to update later on. The above example would work exactly the same if body1 were a class instead of an ID (I would suggest using IDs to identify unique elements for DOM manipulation, though).
I would also follow the W3C's advice when picking class names for elements and using them in your HTML:
...authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
ID's are unique:
-Each element can have only one ID
-Each page can have only one element with that ID
Classes are NOT unique:
-You can use the same class on multiple elements.
-You can use multiple classes on the same element.
Yes that would work. Though the id's would not be needed if all you want to do is apply the same style to all 3.
http://www.w3schools.com/tags/att_global_id.asp
http://www.w3schools.com/tags/att_global_class.asp
Yes You can do that if you want to have same style applied to all divs than you can definitely use class to apply styling to divs. If your div is going to be different than others than you can can probably use id which will allow you to access that div through javascript also.
If it is only styling then id is not really required and you need not to give class name if it is same class for all child divs.
HTML
<div id="body">
<div></div>
<div></div>
<div></div>
</div>
CSS
#body div {
background:red;
width:100px;
height:100px;
display:inline-block
}
DEMO
You can use "class" in many div's but you can use "id" in only one place. Because ID should be unique in each page.
<div id="body">
<div class="mystyle"></div>
<div class="mystyle"></div>
<div class="mystyle"></div>
//(and so on)//
</div>
<style>
.mystyle{color:#000;}
<style>
You can use this
<div id="demo">
<div class="box test"></div>
<div class="box test"></div>
<div class="box test"></div>
</div>
CSS:
#demo
{
margin:0;
padding:0;
}
.box
{
Width:100px;
height:50px;
background:red;
}
.test
{
color:white;
}
you can apply two class.