I have a problem. In my web project I use css. In some moments I want to restart inheritance form the parent class.
I have some classes which define my styles, but I want to reset all style without hover.
When I use reset in this way:
<a id="hrefSite" href="{{route('about') }}"><i style="all: unset; font-size: 150px;" class="conf conf-ui"></i></a>
It works, but when I add color: #868e96; in style inline, the hover dosn't work.
These two classes conf conf-ui must stay because there I load the google, fb, etc icons.
I tried write another class to do it:
.newStyle{
all: unset; !important;
font-size: 150px;
color: #868e96;
}
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
but it isn't working correctly. Size is incorrect.
EDIT:
This is my hierarchy in HTML.
<div class="col-md-12 col-lg-4">
<div class="cr">
<div class="cr-block cntr"
<div class="icon">
<a id="hrefSite" href="{{route('about') }}"><i class="conf conf-ui newStyle"></i></a>
</div>
</div>
</div>
</div>
I found the mistake.
I tried to set style to <i> tag. When I changed it for <div> tag it works.
But now I don't now why.
It's due to that in css I can't set style for <i> tag?
Can someone explain this?
Related
I'm trying to not apply hoover on one of my CSS class with the :not() selector.
.left-menu-sidenav a:not(.selected):hover {
background-color: #6689E6;
color: white;
width: 100%;
}
<div className="left-menu-sidenav">
<a href="/">
<img alt={"left-menu"} className="left-menu-logo-image selected" src={left_menu_logo}></img>
</a>
</div>
I have a lot of tag in my page and I have to keep this logo in the "left-menu-sidenav".
What did I miss to exclude the hover from this particular class?
The a:not(.selected) is rereferring to an <a> tag selector but your HTML code has no class at all, only the <img/> within it has a selected class.
Consider why your image has this class, what toggles it.
Probably it should be moved to the parent <a> tag
I currently have a small css problem.
I try to restyle Buttons in a WordPress Theme (BeTheme)
<div class="mcb-wrap-inner">
<div class="column mcb_column mcb-item-b2bxp8gm6 one-fifth column_button">
<div class="button_align align_center">
<a class="button btn-home btn-important button_size_2 button_dark" href>
<span class="button_label">My Button</span>
</a>
</div>
</div>
</div>
The problem is this existing css class (output from dev console):
.column_button .button {
margin: 0!important;
vertical-align: middle;
}
Does anyone know how to override this !important margin value?
I am happy about your answers :)
Best regards from Germany and stay healthy
You probably mean “override” not overwrite?
Just add your selector to the Additional CSS in theme customization. Don’t forget the !important.
.column_button .button {
margin: 10px !important;
}
Since the additional CSS is loaded after theme files, it will take precedence over theme CSS.
Is it possible to not apply a css class to a specific element in the class?
For example:
<div className="container-fluid bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href= {"https://www.linkedin.com"}><img src={linkedin} className={"linkedin"}/></a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!</p>
</div>
In this code I would like to exclude the img tag from the container class so the CSS isn't applied to that element. I know I could just make two separate divs of the same class and put the anchor tag in the middle but I want to know if I can do this programmatically.
div.dummy :not(a):not(img) {
background: black;
color: white;
font - size: 20 px;
width:100%;
height:50px;
position:relative;
}
<div class="container-fluid dummy bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href={ "https://www.linkedin.com"}>
<img src={linkedin} class={ "linkedin"}/>
</a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!
</p>
</div>
You can see in the above demo that except img tag, all are getting affected.
Try using :not selector
Read here consulting can i use
else have a particular css for the img overriding any css you want.
The`:not(selector) selector matches every element that is NOT the specified element/selector.
:not(.container>img) {
background-color: blue;
//your css here
}
On my website (http://milesopedia.com) I have this overlay on the image but the icon is not correctly aligned, as you can see here:
It's a Wordpress-based blog with a theme and if I look at the preview of the theme (http://themes.tielabs.com/sahifa/category/world/) the element is correctly positioned:
I have compared the html and css and they seem identical to me. The markup uses a span with a pseudo before element to render the icon. I can't find the source of the problem.
Here's the code:
<div class="post-thumbnail">
<a href="http://milesopedia.com/conseils/ou-partir/partir-a-nouvelle-orleans-points-miles" rel="bookmark">
<img width="310" height="165" src="http://i1.wp.com/milesopedia.com/wp-content/uploads/2016/05/Canal_Streetcar_in_New_Orleans_Louisiana_USA.jpg?resize=310%2C165" class="attachment-tie-medium size-tie-medium wp-post-image" alt="Photo: Didier Moïse">
<span class="fa overlay-icon"></span>
</a>
</div>
Set display: inline; for that <span> element.
Override this rule inherited from font-awesome.css:
.fa {
transform: translate(0, 0);
}
I've just tried to disable it in inspector and icon got centered as you expect.
UPD:
Or, as per #jacob answer, there is a cleaner approach just setting display: inline for your icon span element.
I want to highlight current page by using CSS, but somehow it doesn't work. Please take a look at my code below.
HTML
<body id="home">
<div id="mainNav">
<a href="/Dashboard/Index" id="navIndex">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span>
</div>
</a>
<a href="/samples/register/" id="navRegister">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span>
</div> </a>
<a href="/samples/search/">
.........
</div>
CSS
body#/samples/register a#navRegister .textStyle {
background-color:red !important
}
The syntax is wrong. Use this way:
body a#navRegister[href="/samples/register"] .textStyle {
background-color:red !important
}
Yours is a worst example of having div inside <a>, which is similar to having a bottle inside some water, not water inside bottle, which is right one.
Take your body ID, in this case #home and combine it with the id on the home nave element, in this case #navIndex:
#home #navIndex .textStyle {
background-color: red;
}
Then you can add a selector for each of your pages to catch the current page in the nav with css alone:
#home #navIndex .textStyle,
#register #navRegister .textStyle {
background-color: red;
}
Drop the !important it's only necessary in a couple of edge cases in css and should be avoided (I appreciate one of those edge cases is just trying to definitely make a selector show some visible effect, which may well be what you're doing with the posted css).
You'd also benefit from using classes instead of ids as css selectors.
Caveat:
It's probably better to render this in the html server side as the server can use the request URL to decide which nav item is current. That way you can just add a selected-nav-text class to your current nav span and your css becomes:
.selected-nav-text {
background-color: red;
}
This is simpler, you can write logic once server side to calculate the current nav and css once to highlight it, then when you change your nav the functionality will come instantly.