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
Related
I building a common css user file for two different web pages. I have unordered lists on two different pages. In the actual html there are lots of unordered lists deeply nested in divs and what have your. The actual number of list items is greater than shown here. I need to format the first set of list items differently than the second set. There is nothing different in the ul coding. There is too much css to wade through for other differences.
<-- list in first page -->
<ul class="our-list">
<li class="group item" data-filter-id="draft">a little bit of <span>text</span></li>
<li class="group item" data-filter-id="contentstatus[published]">other <span>text</span></li>
<li class="group item" data-filter-id="participated">last of the <span>text</span></li>
</ul>
<-- list in second page -->
<ul class="our-list">
<li class="group item" data-filter-id="One">a little <span>text</span></li>
<li class="group item" data-filter-id="Two">the <span>text</span></li>
<li class="group item" data-filter-id="Three">last <span>text</span></li>
</ul>
The only discernible difference that I have noticed is different data-filter-id fields. I need to reference the span tags in the first list and not the second.
I've written this css to address the first li in the first list:
li[data-filter-id="draft"] span {
background-color: yellow !important;
}
Is there some way to refer to the sibling li tags in this css?
I could code:
li[data-filter-id="draft"] span,
li[data-filter-id="contentstatus\[published\]"] span,
li[data-filter-id="participated"] span, {
background-color: yellow !important;
}
But is there some shortcut I could code to have to list all the adjacent list items?
This this the correct way to escape the imbedded [] in css?
li[data-filter-id="contentstatus\[published\]"] span,
Is this the correct way to include the class on the css for the li tag?
li.group.item[data-filter-id="draft"] span,
Use ul:first-of-type > li as a selector for all li items inside the first ul
If that isn't sufficient (you write about different pages), use a class on the according ul and address the child lis of that class like ul.my-class > li
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 am working on a site with this fieldset with ul. It is a joomla template where I am logged in as a publisher. This is the menu where you are able to change your articles.
What I would like to happen is that the first a and the last two a's are not visible. (like with a display:none). But I don't know how to call the lines in css. I know :nth-child() exists but It did not work the way I tried it.
<fieldset>
<ul class="nav nav-tabs">
::before
<li class>
Content
</li>
<li class="active">
Publishing
</li>
<li class>
Language
</li>
<li class>
Metadata
</li>
::after
</ul>
Is there anyone who knows how to call them in css? I am sorry if this question is not really expert level. Thanks
You can do it with simple CSS
.nav li:first-child,
.nav li:nth-child(3),
.nav li:nth-child(4) {
display: none;
}
But this is not a clean way. The edit form should be redesigned by an override. If you haven't the privilege to do that, ask the template developer.
Hide all and show the active one.
.nav-tabs li {display: none;}
.nav-tabs li.active {display: list-item} /* or block, if LIs are floated or you want them block */
Put the same class to the li's you want to hide and call them on your css.
Example:
<li class="hide-me"></li>
li.hide-me { display: none;}
BTW if you plan on changing the display value later on to show them separately id suggest you to use an id instead of a class.
Sometimes working with wordpress can be a pain. Im trying to style a menu that is generated by wordpress.
here is the basic html
<div class="footer">
<!--Generated By Wordpress-->
<ul class="menu">
<li class="menu-item">
<a></a>
<ul class="sub-menu">
<li class="menu-item">
<a></a>
</li>
</ul>
</li>
</ul>
<!--End Generated-->
</div>
I want to create some CSS to target specifically the <a> within the sub menu, without messing with the <a> in the main menu. Also I cant mess with any other menus I have set up on the site, so this also must be specific to the footer menu.
Would this be the proper method?
.footer .sub-menu a { }
What would be the proper method for this?
Actually you are right the following ways are appropriate:
1
.footer .sub-menu a{}
2
.footer ul.sub-menu a{}
3
ul.sub-menu a{}
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