This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
CSS 3 nth of type restricted to class [duplicate]
(2 answers)
Closed 5 years ago.
I have the next code:
<div id="mainContainer">
<ul>
<li class="mainclass class1-1"> </li>
<li class="mainclass class1-1"></li>
<li class="mainclass active"></li>
<li class="mainclass class1-2"></li>
<li class="mainclass class1-2"></li>
</ul>
</div>
I tried to select the second type with class1-2 with the next lines but nothing happen:
#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class~="class1-2"]:nth-of-type(2){right:1.7em;}
#mainContainer li[class*="-2"]:nth-of-type(2){right:1.7em;}
#mainContainer ul li[class*="-2"]:nth-of-type(2){right:1.7em;}
.mainclass.class1-2:nth-of-type(2){right:1.7em;}
Exist some css selector especify for this case?
I don't believe you can target the element on its own but if you only have the 2 elements with .class1-2 then you can use the following:
.mainclass.class1-2 + .mainclass.class1-2 {
right:1.7em;
}
Keep in mind this will affect additional elements that come directly after it with the same class.
Related
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:
Two divs side by side - Fluid display [duplicate]
(9 answers)
Closed 2 years ago.
In my application I have the following code
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search for something..." data-inset="true">
</ul>
<span class="material-icons"> filter_alt </span>
These 2 elements are currently on 2 sperate rows. How can I make them in the same horizontal row?
<ul> is a block level element. Means it will be displayed below other elements and the following element will be displayed below the unordered list. If you change the ul to an inline-block element, it will go inline with other inline elements such as a link a.
ul {
display: inline-block;
list-style: none;
}
<ul>
<li>List Item</li>
</ul>
Link
This question already has answers here:
difference between body and * in css
(5 answers)
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 3 years ago.
I have created a nested list in html.
Why does setting margin: 0 using the *{} selector remove the list indention but not if I use the body selector?
body {
padding: 0px;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Resume
<ul>
<li>Experience</li>
<li>Skills</li>
<li>Portfolio</li>
</ul>
</li>
<li>Interests
<ul>Photography</ul>
<ul>Favourites</ul>
</li>
</ul>
The asterisk * means all, so when you put a property in (all) it basically styles all the elements in your HTML body
But when you choose only to style the body you don't change anything's style but body
You can read the answers here for more details
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>
This question already has an answer here:
Does :not() negation accept descendant selectors? [duplicate]
(1 answer)
Closed 6 years ago.
So I have a code structure like this:
.header-container a:not(.header-menu-right a) {
display: none;
}
<div class="header-container">
<div class="header-menu-right">
<ul>
<li>link</li>
<!-- unimportant links -->
<li>link</li>
<!-- unimportant links -->
</ul>
</div>
link
<!-- important link -->
</div>
As you can see by the notes, I only want CSS to change the last a-tag.
What am I doing wrong here?
Try this and there you go:
.header-container > a {
display:none;
}
Thanks!