This question already has answers here:
nth-of-type vs nth-child
(7 answers)
Closed 1 year ago.
I am working in a CMS. first-child selector not working as there is a div inside the ul. When i remove the div in console, first-child selector applies. I cant change the DOM nor use JS. So what would be the solution. Thanks in advance.
ul.tab-list li:first-child img{
max-width: 145px;
height: 59px;
}
<ul class="tab-list">
<div></div>
<li class=" tab-list-element">
<a href="#">
<img src="Logo.png" alt="Logo">
</a>
</li>
<div></div>
<li class=" tab-list-element">
<a href="#">
Link Text
</a>
</li>
</ul>
To select the <img> inside the <li> that is the subsequent sibling of the <div> that is the first child of a <ul>:
ul > div:first-child + li img {
// ...
}
Related
I am trying to add a underline like symbol below the active link for that purpose i am used ::after element and set it's width to 100% to get its parent element's width but the psudo element is way much bigger when width is 100%;
my html code is 👇
<header class="main-header">
<a class="category-name">
<span> Sneakers </span>
</a>
<nav class="main-nav">
<ul class="main-nav-list">
<li class="m">
<a class="main-nav-link" href="#how">Collections</a>
</li>
<li><a class="main-nav-link" href="#meals">Men</a></li>
<li>
<a class="main-nav-link" href="#testimonials">Women</a>
</li>
<li><a class="main-nav-link" href="#pricing">About</a></li>
<li><a class="main-nav-link nav-cta" href="#cta">Contact</a></li>
</ul>
</nav>
<ul class="my__ac-list">
<li class="nav--cart_icon" id="cartBtn">
<a href="#" class="cart-icon"
><img src="./images/icon-cart.svg" alt="cart icon" srcset=""
/></a>
<p class="cart--strip">3</p>
</li>
<li>
<a href="#">
<img
class="profile-thumbnail"
src="./images/image-avatar.png"
alt="image-avatar"
srcset=""
/>
</a>
</li>
</ul>
</header>
my css code is bit lengthier i couldnot format correctly so i have created code containg my html and css
codepen link = https://codepen.io/sinan-m/pen/abKQaxp
i want to add a underline below the active navigation link like in design
my design image https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/active-states-basket-filled.jpg
.main-nav-list li.m for this selector you need to add position: relative. Beacause right now the after pseudoelement is not positioned relative to the li element.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Because you didn't set position:relative on the li, he after element takes the width of the window browser. That's why when set to 100%, it's so wide.
Result
Solution
.main-nav-list li.m {
border-bottom: 5px solid tomato;
}
I edited the rule for the .main-nav-list li.m selector in the code pen.
To get it more spaced out, then add some padding. e.g.
.main-nav-list li.m {
border-bottom: 5px solid tomato;
padding-bottom: 1ex;
}
You also need to change
.main-nav-list {
…
align-items: top;
…
}
To keep the alignment good. And remove the yellow.
This question already has answers here:
Why is my background color not showing if I have display: inline?
(6 answers)
Inline container isn't showing background color when wrapping elements [duplicate]
(1 answer)
Closed 1 year ago.
In this little example I have attached I expected the yellow background to extend to the li tags that are children of the ul but this seems not to be how it behaves when display:inline is applied to the ul tag.
What's the logic behind this behaviour?
P.D. I know how to fix this issue. I could make the ul tag an inline block, but this is not what this question is about. I exactly thought that the below code would have behavef as if display-block was applied. In the end, you have a tag surrounding a content. display:inline makes it show in the same line but shouldn't it big as big as its content?
.li {
background-color:red;
}
.inline-ul {
display:inline;
background-color:yellow;
}
.inline-li {
/*display:inline;
background-color:green;*/
}
<html>
<head>
</head>
<body>
<nav>
<ul class="mainMenu">
<li>Item1</li>
<li class="li">
<span>Item2</span>
<span>Item3</span>
<ul class="inline-ul">
<li class="inline-li">Item11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</nav>
</body>
</html>
This question already has answers here:
CSS selector for targeting only immediate children and not other identical descendants
(2 answers)
Closed 2 years ago.
I use CSS Modules which generates random class names for my tags. How can I select an element of specific type without selecting descendants? So far I've tried to use selectors :first-of-type and :first-child like this:
.settings ul:first-of-type > i:first-child {
opacity: 0.5;
}
But the result is that my rule applies to every <i> element on my page.
HTML:
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
Use the CSS child combinator >:
.settings > ul > li > i {
opacity: 0.5;
}
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
The child combinator (>) is placed between two CSS selectors. It
matches only those elements matched by the second selector that are
the direct children of elements matched by the first.
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 4 years ago.
I have the following link structure for my categories:
<ul>
<li class="current-cat cat-parent">
Parent-Cat
<ul class="children">
<li class="cat-item cat-item-71">
Children-Cat
</li>
</ul>
</li>
</ul>
Now I want only the current-cat class to change the color of it's a element:
#outer-section .outer-div ul .current-cat a {
color: red;
}
The problem is, that the children (cat-item cat-item-71) gets changed, too. How can I prevent that and change only the parent a of the current-cat?
Use the direct child selector: .foo > .bar
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the children of elements matched by the first.
Documentation
.current-cat > a {
color: red;
}
<ul>
<li class="current-cat cat-parent">
Parent-Cat
<ul class="children">
<li class="cat-item cat-item-71">
Children-Cat
</li>
</ul>
</li>
</ul>
Note that I didn't use the whole selector (#outer-section .outer-div ...) for the example since you only provided the HTML structure from the ul element.
You can use the > that will prevent the inheritance:
#outer-section .outer-div ul .current-cat > a {
color: red;
}
<ul>
<li class="current-cat cat-parent">
Parent-Cat
<ul class="children">
<li class="cat-item cat-item-71">
Children-Cat
</li>
</ul>
</li>
</ul>
I am trying to create a I am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create aI am trying to create a
HTML
<div id="pageTop">
<nav>
<ul>
<li> <img src="images/search.png" alt="" class="headerCon" /> <navText> Home </navText> </li>
</ul>
</nav>
</div>
CSS
nav > ul > li > a {
color: #aaa;
}
nav > ul > li > div ul > li {
display: block;
}
You can make the <img> elements block elements and center them using an auto margin.
ul img {
display : block;
margin : 0 auto;
}
Another would be to use background images along with a background position:
ul li.home {
background-image : url(...);
background-position : center;
}
You will probably also want to remove the spaces between the <li> elements. I like doing this by omitting the optional closing tags so you would have:
<ul>
<li><a href=...><img src=... />Item 1
<li><a href=...><img src=... />Item 2
...
</ul>
Other options for removing spaces can be found here: How to remove the space between list items
Edit: JSFiddle added with a stripped down version to show how this could work.
just put a line break in the <li>
<li><a href="..."> <img src="..." class="headerCon" /> <br/>
<navText> Home </navText> </a>
</li>
I would take out the <navText> too, that's not valid HTML
<li><a href="..."> <img src="..." class="headerCon" /> <br/>
Home </a>
</li>