i have a menu:
<li id="current" class="selected parent item556">
Parent
<ul>
<li class="item557">
Child
</li>
<li class="item558">
Child
</li>
</ul>
</li>
And i want to style only the Parent "a" element, but it styles all the Child elements too, since their are under the parent "li".
I tried something like:
li#current a:first-child{
color: #F2F2F2;
}
Didn't work, how do i style only the Parent "a"?
You can use the immediate child operator > to target the link (i.e. only links directly in the li element):
li#current > a
Try: li#current a:first-of-type to get the first a
Or you can try: li#current:nth-child(1) to get the first child
Related
I have a nested list in my menu and I wanted the first child of the sub list highlighted when the parent is highlighted. I want to code this just by using CSS (in SCSS file format) This is a list within a list. I have list items below another list item of another
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span> <!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list"> <!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
<li class="sub-list-item">
<span>this is another list item in class="sub-list"</span>
</li>
</ul>
*EDIT: changed some of the words being used in this question to make this one understandable. and added another child item to .sub-list to make a better understanding of the issue.
The 'span' (<a>) isn't actually a parent. It's a sibling. The parent to the first child (list item) in the sub list is the <ul class="sub-sub-list">. That means they are siblings.
You can use the + selector to target siblings: https://www.w3schools.com/cssref/css_selectors.asp
.sub-list-item a:hover + ul > li:first-child {
background-color: lightgrey;
}
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span>
<!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list">
<!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
</ul>
I am trying to understand selectors if I had something like
#topbar .ink-navigation ul.black li a.logoPlaceholder
does it mean I can issue a
<li class="logoPlaceholder">
or
Test</li>
There are lots of css selector tricks you can do, I started studying css selector in this CSS game
But let me answer what's that selector is calling ..
#topbar .ink-navigation ul.black li a.logoPlaceholder
so basically this select an a tag element that has a class of logoPlaceholder inside an li that is also inside in a ul tag with a class .black which is also inside in a element with a class .ink-navigation with a parent element that has an id topbar
Edit: Added a code to demonstrate what I mean:
<nav id="topbar">
<div class="ink-navigation">
<ul class="black">
<li>
//Selectors call this element.
<a class="logoPlaceholder"></a>
</li>
</ul>
<ul class="white">
<li>
//Selectors won't call this because li tag was not inside a ul with a class of black.
<a class="logoPlaceholder"></a>
</li>
</ul>
</div>
</nav>
The second one is correct.
a.logoPlaceholder
Means that the <a> tag has the class logoPlaceholder, like this:
`<a class="logoPlaceholder" href="#">Link text</a>`
In fact, it is also telling you that the basic HTML scaffolding looks something like this:
<tag id="topbar">
<tag class="ink-navigation">
<ul class="black">
<li>
<a href="#" class="logoPlaceholder">
The elements that are labelled tag are not specified, so impossible if they are DIVs or NAV or ASIDE or SECTION or ? (But, I would guess the first one is a NAV and the second is a DIV)
I have a nested unordered list with one "li" element defined with identifier: [data-main]
1 (must be selected)
1.1
1.2
2
using the following html:
<ul>
<li data-main>1 (must be selected)
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>2</li>
</ul>
I'm trying to find the right CSS selector for selecting only element 1 without its children: 1.1 and 1.2. Selectors, I tried:
li:not([data-main]) - selects all li except main, but i need something opposite
[data-main]:not(:nth-child(1)) - selects nothing
https://jsfiddle.net/DaViking/dtqhag2t/
What you're not realising is that the [data-main] selector in your JSFiddle demo is selecting only that top-level li element. The problem you're facing here is that this li element contains the other li elements. Those aren't selected by this selector individually, but they are contained within the element which is selected:
If you want to style just the text held within the [data-main] element but not within the ul element contained within it, you'll need to override the [data-main] style declarations:
[data-main] {
color: red;
}
[data-main] ul {
color: initial;
}
<ul>
<li data-main>1 (must be selected)
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>2</li>
</ul>
If you want to place a border around the "1 (must be selected)" text and nothing else, you can wrap that text in a span element and apply styling to that instead:
[data-main] span {
border: 1px solid red;
}
<ul>
<li data-main>
<span>1 (must be selected)</span>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
<li>2</li>
</ul>
I have this structure:
<div id="sidebar">
<ul>
<li>
"Main item"
<ul>
<li class="cat-item cat-item-21">
"Child item"
</li>
</ul>
</li>
It's generated and I cannot modify it. But, using CSS, I want to make the "Main Item" unclickable, using:
pointer-events:none
How can I acces the first "li" in the "ul" and modifiy his CSS without touch the rest ?
You need to use the > identifier to only specify to go one level deep per element you're looking at such as...
#sidebar > ul > li > a{ pointer-events:none }
This will select only the first a of the first li of the first ul inside #sidebar
Consider my html as follows:
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</li>
</ul>
My lists are styled as tabs, and I have my anchors as their parents so that when a user hovers over a tab it becomes selectable
My issue is that I was hoping to use a:hover, or the other anchor properties to change the background colour of my list item...is this possible using CSS?
I can't get it to work so I'm thinking I may have to use some JavsScript?
Wrapping the <li>'s in <a> is improper HTML and may not render properly in all browsers. A better solution would be to set the display property of the anchor to display:inline-block. Then you will be able to set the width and height of the anchor to the width and height of the li's. This way you can also use the hover property of the anchors.
<ul id="menu">
<li class="highlighted" id="first_item">Home</li>
<li class="non_selected_tabs">Join</li>
<li class="non_selected_tabs">Fixtures</li>
<li class="non_selected_tabs">Our Club</li>
<li class="non_selected_tabs">History</li>
<li id="hover" class="non_selected_tabs">Club Gear</li>
</ul>
#menu li a
{
display: inline-block;
width: 100%;
height: 100%;
}
#menu li a:hover
{
background-color:red;
}
The direct children of a ul element should only ever be list items elements, not an a.
You could either use :hover on the li element it's self, this works in browsers that aren't IE, maybe even IE8 and up..
Or you could style the a to take up the entire space area of the li, and style the li to be inline, so not to display as a typical list.
You can use :hover on other elements, not just anchors.