I have a block with div inside:
<div>
<div class="do">Do it</div>
</div>
Element .do has cursor: none, but parent div has cursor.
How to remove cursor from .do element? Now parent block sets this property
It should come with simple rule
div {
cursor: pointer;
}
.do {
cursor: none;
}
<div>
<div class="do">Do it</div>
</div>
You're probably dealing with CSS Precedence Rule. Have a look at this Specificity doc for further details.
I am assuming, this is what's happening (Pasted code from Nicolae's answer)
.withCursor > .withoutCursor {
cursor: pointer;
}
.withCursor {
cursor: pointer;
}
.withoutCursor {
cursor: none;
}
<div class="withCursor">
<div class="withoutCursor">Do it</div>
</div>
As you may notice, the rule for .withoutCursor gets overridden by the .withCursor > .withoutCursor.
If you figure out the right selector for your .do, or remove the one that overrides it, this should be trivial.
.withCursor {
cursor: pointer;
}
.withoutCursor {
cursor: none;
}
.withInitialCursor {
cursor: initial;
}
<div class="withCursor">
<div class="withoutCursor">None</div>
<div class="withInitialCursor">Cursor initial</div>
<div>Cursor pointer - inherited</div>
</div>
You can just do cursor: none to the inner element.
Related
I understand that I can change another element's style when hovering on a different element like this:
.element-one:hover .element-two {
opacity: 0.8;
}
But how can I change the style of all the elements in the page except element-two when I hover on element-one?
You can use .element-one:hover :not(.element-two).
Here is an example:
.element-one:hover :not(.element-two) {
opacity: 0.8;
}
.element-one {
background: black;
margin: 10px;
}
.element-one div {
background: green;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
<div class="element-one">
<div class="element-two">
element-two
</div>
<div class="element-three">
element-three
</div>
<div class="element-four">
element-four
</div>
</div>
However - note that it will work only for elements inside element-one and not for all the elements in the page.
You can do this with body for example, but the problem there is that .element-two is probably also inside some other element that exists inside body, and in such case the .element-two will get the opacity from it's containing element.
I need to get rid of all the text in this div while preserving anything in <a>.
<div class="footer">
Lorem ipsum etc etc etc... <img src="trash.png"> <img src="garbage.jpg">
Somewhere
... blah blah <em>blah</em> blah ...
<a href="anotherlink.html>Another Link</a>
... in conclusion earthworms are interesting.
</div>
However when I use this:
.footer :not(a)
{
display: none;
}
the text still remains.
I can only use CSS for this, since it's a userstyle. Is this possible?
Since you can't select text nodes, one option would be to set the font-size of the parent element to 0, and then re-specify a font-size for the a elements.
Example Here
.footer {
font-size: 0;
}
.footer :not(a) {
display: none;
}
.footer a {
font-size: 16px;
}
.footer {
font-size: 0;
}
.footer :not(a) {
display: none;
}
.footer a {
font-size: 16px;
}
<div class="footer">
Lorem ipsum etc etc etc... <img src="trash.png"/> <img src="garbage.jpg"/>
Somewhere
... text nodes.. text nodes <strong>text nodes</strong>
Another Link
... some other text node
</div>
Unfortunately, the down-side to this method, is that you will be unable to set the font-size of the a elements using relative em units.
As a side note, it's worth mentioning that you can also set the visibility of the parent footer element to hidden, and then set the visibility of the children a elements to visible.
Updated Example
This clearly doesn't achieve the same effect as display: none/display: block, but nonetheless, I thought it would be worth pointing out.
.footer {
visibility: hidden;
}
.footer a {
visibility: visible;
}
.footer {
visibility: hidden;
}
.footer a {
visibility: visible;
}
<div class="footer">
Lorem ipsum etc etc etc... <img src="trash.png"/> <img src="garbage.jpg"/>
Somewhere
... text nodes.. text nodes <strong>text nodes</strong>
Another Link
... some other text node
</div>
try:
.show {
display: block !important;
}
.hide {
display: none;
}
and apply the show class to all a tags and hide to the div.
I would like to make it so that all of my tags look plain when they show up on the screen also after I visit them or if I hover over them. I put all of my divs in a wrapper and tried to refer to them but it didn't seem to work. I don't really need the wrapper if I could just refer to everything using a:hover ... that would be fine.
here is my HTML
<div id="wrapper">
<div id="settings_button">
<span class="settings_text">
Settings
</span>
</div>
<div id="posts_button">
<span class="one_bar_text">
Posts
</span>
</div>
<a href="#" alt="posts">
<div id="posts_button_dark">
<span class="one_bar_text">
Posts
</span>
</div>
</a>
<div id="profile_button">
<span class="one_bar_text">
Profile
</span>
</div>
<div id="profile_button_dark">
<span class="one_bar_text">
Profile
</span>
</div>
</div>
Below is my CSS
#wrapper a:link {
color: none;
text-transform: none;
}
#wrapper a:visited {
color: none;
}
#wrapper a:hover {
color: none;
text-transform: none;
}
I will be making most of my divs into links i just haven't yet. and i would like to avoid having to reference each div's tag on my CSS page
so i changed my CSS to this
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none;
}
a:hover {
color: none;
text-transform: none;
}
but the link is still being underlined on hover over
a {
color: black;
text-decoration: none;
}
This is highly questionable, but it addresses the question you asked. You don’t need any fancy selectors, since any setting in a page style sheet that applies to an element will override browser defaults.
You just need to set an explicitly color (or use inherit, but IE does not support it), and to kill underlining, you need to set text-decoration, not text-transform.
You should use either links or buttons, not <divs>.
If you do decide to go with the current markup:
div[id*=button] {
...
}
If you decide to sober up (seriously, don't use divs!)
Just a or button will do.
a {
color: red;
}
Will color all links in red.
Note that it will catch all links, as in in the content area, the nav, the footer. Everywhere.
a{
color:#fff;
}
Is this what you meant?
Just use a
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none; }
a:hover {
color: none;
text-transform: none; }
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.
Can somebody please explain what the inherit keyword means in CSS and how it works?
It will use the same value as the same property its parent has.
body {
margin: 234px;
}
h1 {
margin: inherit; /* this equals 234px in this instance */
}
<body>
<h1></h1>
</body>
If there are multiple instances of <h1> in the file, it will take the margin of its parent, so 234px is not always the value it will have. For example:
<body>
<h2></h2>
<div>
<h2></h2>
</div>
</body>
body {
margin: 20px;
}
div {
margin: 30px;
}
h2 {
margin: inherit; /* 20px if parent is <body>; 30px if parent is <div> */
}
To clarify, inherit doesn't do anything unless you're using it to override another style rule, otherwise it's just reinforcing the default behavior. Note that the overriding rule should be higher specificity or be below the rule that it overrides.
.pink {
background-color:pink;
}
.green {
background-color:lightgreen;
}
.override {
background-color:inherit;
}
<div class="pink">
<p class="green">I'm classed "green", and I am green.</p>
<p class="green override">I'm also classed "green" but `inherit` overrides this and causes me to inherit pink from my parent.</p>
</div>