I am trying to create a custom menu component. And I need the consumer of this component to be able to style it from the outside.
I thought the ::part selector would be perfect for this. So I used this in my Sass file:
custom-menu
&::part(navbar-sub-content)
position: absolute
display: none
//it seems not possible to combine part selectors?
&::part(navbar-subnav):hover &::part(navbar-sub-content)
display: block
color: red
(the colour is just for debugging purposes)
And the relevant generated HTML. Keep in mind that this is in the shadowDOM.
<ul part="navbar">
<div part="navbar-subnav navbar-item">
<div part="navbar-subnav-button ">sub-menu</div>
<div part="navbar-sub-content div li">
<a part="a navbar-sub-link li" href="example.com">
sub-1
</a>
<a part="a navbar-sub-link li" href="example.com">
sub-2
</a>
<a part="a navbar-sub-link li" href="example.com">
sub-3
</a>
</div>
</div>
</ul>
For some reason, this does not work as expected. I would expect that, when hovering navbar-subnav, that navbar-sub-content would become visible. But instead, nothing happens. I do wonder if I got my selectors wrong, or that this is a limitation of the ::part selector.
Related
I am aware in **CSS** we can apply a set of styles to nested classes in elements (demonstrated at this page Apply CSS rules to a nested class inside a div).
I am now trying to apply a style to a nested class in a div. The catch here is I am unable to apply the style to only the nested class of the currently hovered element.
To explain further, here is an HTML snippet:
<div class="link-wrap">
<div class="link"> Github </div>
<hr class="text-underline">
<div>
<div class="link-wrap">
<div class="link"> Facebook </div>
<hr class="text-underline">
<div>
I would like that if I hover over the Github link, I would alter the style of the <hr> for the Github link alone.
Currently, when I do alter the style of the <hr>, both of the <hr>s have their styles altered at the same time.
I am trying to find a non-JS solution.
Is something like this getting close to what you're after?
.link-wrap:hover > .text-underline {
border-color: blue;
}
<div class="link-wrap">
<div class="link"> Github </div>
<hr class="text-underline">
</div>
<div class="link-wrap">
<div class="link"> Facebook </div>
<hr class="text-underline">
</div>
.link-wrap:hover > hr {
your styles
}
this will apply your styles to any <hr> that is the direct descendant of .link-wrap that is hovered
I have a wordpress website with this free theme: https://wordpress.org/themes/minimal-grid/
I'm seeing some unusual behaviour, which isn't a problem and I can fix by removing the element, but I don't know why it's happening and would like to understand it.
At the end of each post, there is a link to the previous and next post. When I hover over these, the background of the element darkens slightly. Where there is an image as background, it doesn't disappear, just darkens. Here's a page that demonstrates: https://5diraptor.com/todoist-task-project-manager/
The unusual part is there doesn't seem to be any :hover selectors which actually tells it to do this, so I'd like to understand why it's happening. Below is the HTML:
<nav class="navigation post-navigation" role="navigation" aria-label="Posts">
<h2 class="screen-reader-text">Post navigation</h2>
<div class="nav-links">
<div class="nav-previous">
<a href="https://5diraptor.com/vivaldi-browser/" rel="prev">
::before
<span class="meta-nav" aria-hidden="true">Previous</span>
<span class="screen-reader-text">Previous post:</span>
<span class="post-title">Vivaldi Browser</span>
</a>
</div>
<div class="nav-next">
<a href="https://5diraptor.com/wordpress-development/" rel="next">
::before
<span class="meta-nav" aria-hidden="true">Next</span>
<span class="screen-reader-text">Next post:</span>
<span class="post-title">WordPress Development</span>
</a>
</div>
</div>
</nav>
There's no :hover selectors on any of these elements which change background color. However, when I remove the ::before elements in Chrome Dev tools, the hover transition no longer happens.
What I don't understand is there's no :hover selector on the ::before pseudo-element, and there's no color related CSS applied to this - see screenshot. There's also no event listeners for mouseover so I'm pretty sure this isn't Javascript.
I can't force element state to hover for pseudo-elements so I'm not sure how to debug this any further. Can anyone help me understand why this is happening?
See it has a style for the hover state of the parent nav-previous and the rule applies to the pseudo element when it is hovered.
I am creating a website based on Wordpress i am facing a very strange issue with each of the section, that when i apply any style specially the background color it does not apply directly, but when i add CSS property as follows:
.abc {
background-color:red;
overflow:hidden:
}
It starts work fine, and also when overflow property is not applied it not even highlighting the whole area of that section in Debug Mode.
Now the issue with the overflow property is i have some content cutting due to this as you can see in the following image:
And without overflow property the behavior of the section can be seen in the following image:
So now i want the background color to the section as well as to not cut the content as you can see in the first image. how i can fix this any quick solution will be appreciated.
consider the following structure
<header class="header-abc">
::before
<div class="inner-abc-left">
<img src="img.jpg">
</div>
<div class="inner-abc-right">
<ul class="navigation">
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
<li> < href="#"> abc </a> </li>
</ul>
</div>
</header>
Style is like:
.header-abc {
background: rgba(0,0,0,0.5);
position:relative;
width:100%;
display: block;
clear: both;
}
.header-abc:before {
display:inline;
}
So with this style it is not working fine but added an additional overflow property make it work. keep in mind i am using wordpress with some pagebuilder and purchased theme.
Thanks
It is not possible to solve this issue without having a link or a codepen so that we can at least see where this .abc div is located and what is it's relation to the rest of your code.
I have solved it by my own this issue, it was due to a ::before tag to the header tag like below:
<header class="header-abc">
::before
</header>
so the ::before tag was given display:inline style that why it was blocking the style to be applied, now removed the inline property and everything worked fine.
I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.
I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.
My HTML header container reads:
<div class="header">
<div class="row">
<p id="navigator">
[nav-pills code]
</>
</div>
</div>
With a lot of researching into specificity I thought this may be my problem so I tried CSS code:
.header .row #navigator {
background-color: #CCCDD9;
}
to no avail, but found that simply did work:
.header .row {
background-color: #CCCDD9;
}
now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?
Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?
In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.
In other words, this is not a specificity issue.
<div class="header">
<div class="row">
<div class="col-sm-12">
<p id="navigator">Testing</p>
</div>
</div>
</div>
Bootply Example
After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
</div>
</div>
CSS:
.nav-pills {
background-color: #CCCDD9;
}
Bootply
This question already has answers here:
Make a div into a link
(30 answers)
Closed 8 years ago.
I have a div like this <div class="xyz"></div> and all the content in that div is in the css. How do I make that div into a link? I tried wrapping the a tag around it, but that didn't seem to work.
Thanks!!
You need to assign display: block; property to the wrapping anchor. Otherwise it won't wrap correctly.
<a style="display:block" href="http://justinbieber.com">
<div class="xyz">My div contents</div>
</a>
Using
<div class="xyz"></div>
works in browsers, even though it violates current HTML specifications. It is permitted according to HTML5 drafts.
When you say that it does not work, you should explain exactly what you did (including jsfiddle code is a good idea), what you expected, and how the behavior different from your expectations.
It is unclear what you mean by “all the content in that div is in the css”, but I suppose it means that the content is really empty in HTML markup and you have CSS like
.xyz:before { content: "Hello world"; }
The entire block is then clickable, with the content text looking like link text there. Isn’t this what you expected?
Wrapping a <a> around won't work (unless you set the <div> to display:inline-block; or display:block; to the <a>) because the div is s a block-level element and the <a> is not.
<a href="http://www.example.com" style="display:block;">
<div>
content
</div>
</a>
<a href="http://www.example.com">
<div style="display:inline-block;">
content
</div>
</a>
<a href="http://www.example.com">
<span>
content
</span >
</a>
<a href="http://www.example.com">
content
</a>
But maybe you should skip the <div> and choose a <span> instead, or just the plain <a>. And if you really want to make the div clickable, you could attach a javascript redirect with a onclick handler, somethign like:
document.getElementById("myId").setAttribute('onclick', 'location.href = "url"');
but I would recommend against that.
the html:
<a class="xyz">your content</a>
the css:
.xyz{
display: block;
}
This will make the anchor be a block level element like a div.