navigation image here
how can i disable the green color there whenever i click in gallery page?
Home
<li class="dropdown mega-dropdown">
<a class="dropdown-toggle" href="Gallery.aspx">Gallery<span class="caret"></span></a>
<div class="pc-nav">
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left; visibility:hidden;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
CSS here
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-md-push-3">
<ul>
<li class="dropdown-header" style="text-align:left">Company Trips</li>
<li style="text-align:left;"> 2016 - Vietnam</li>
<li style="text-align:left;"> 2015 - Guilin</li>
</ul>
</li>
</ul>
I assume the current class indicates the column you have selected. Given the markup you provided in the comments, you can rewrite the rule like this to remove the background color:
.current {
background-color: transparent;
}
If you do not have access to the original code but wish to override it, you can supersede the background-color property like this:
.current {
background-color: transparent !important;
}
But in the end, if you don't wish there to be any special background color for the current column, you can just delete the entire block of code.
EDIT
Based on your feedback, I assume you want to highlight the names of the countries in the list but not the first item of the list. In that case, you can target them like this:
ul.dropdown-menu ul li:not(.dropdown-header) {
background-color: #00b200;
}
Related
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
I want to use a CSS selector to select the only li that is a direct child of a TD tag and its parent td tag has Sector text in it. Basically, I want my second li should be selected.
Because there are two <ul> elements with the class field-items and the <li> elements are nested inside the <ul> you will need to select the correct parent <ul> element and then select the <li> from there. You can use the nth-of-type(n) selector in order to achieve that in this case, if you know that you want to select the 2nd <li>.
.field-items:nth-of-type(2) .field-item {
color: red;
}
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
However, you cannot retrieve a specific element basing on it's text content using plain CSS, you will need to have some Javascript code that does that for you. Like this:
document.querySelectorAll("strong").forEach((el) => {
if (el.textContent === "Sector") {
el.closest("td").querySelector(".field-item").style.color = 'red';
}
});
<table>
<td>
<strong>Modality</strong>
<ul class="field-items list-plain">
<li class="field-item">Loan</li>
</ul>
</td>
<td>
<strong>Sector</strong>
<ul class="field-items list-plain">
<li class="field-item">Agriculture, natural resources and rural development</li>
</ul>
</td>
</table>
I need to know how I can select the <li>Iquitos Peru</li> tag using CSS, I have read about "nth-child" but I do not understand it. I have the following sample code.
<ul id="pais">
<h1>Perú</h1>
<li class="departamento">
<ul>
<h2>Lima</h2>
<li class="provincia">
<h3>Lima</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li>Ancon</li>
<li>Comas</li>
<li>Los Olivos</li>
<li>La Molina</li>
<li>Chorrillos</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
<li class="departamento">
<ul>
<h2>Loreto</h2>
<li class="provincia">
<h3>Iquitos Ciudad</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li>Iquitos Perú</li> <-- I need format this ######
<li>Nauta</li>
<li>Belén</li>
<li>Punchana</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="button" value="Enviar" class="btnEnviar" (click)="alert()">
I found this example but I do not know how I can apply it to my case. Is that in this example only divs are used, and I have <ul> I find this but is difficult to understand. Thank you very much.
One way is selecting it like this if you know that the order is not going to change
#pais .departamento:last-child .provincia li:nth-child(2) {
color: red;
}
or using both times the nth-child selector
#pais .departamento:nth-child(3) .provincia li:nth-child(2) {
color: red;
}
Not possible to select the content with CSS. So added a value attribute to the li for selector.
Alternatively if you are using jquery then you can use the contains selector
li[value='Iquitos Per'] {
background-color:red
}
<ul id="pais">
<h1>Perú</h1>
<li class="departamento">
<ul>
<h2>Lima</h2>
<li class="provincia">
<h3>Lima</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li>Ancon</li>
<li>Comas</li>
<li>Los Olivos</li>
<li>La Molina</li>
<li>Chorrillos</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
<li class="departamento">
<ul>
<h2>Loreto</h2>
<li class="provincia">
<h3>Iquitos Ciudad</h3>
<ul>
<li><strong>Ciudades:</strong></li>
<li value="Iquitos Per">Iquitos Perú</li>
<li>Nauta</li>
<li>Belén</li>
<li>Punchana</li>
<li><input type="text" class="eleccion"></li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="button" value="Enviar" class="btnEnviar" (click)="alert()">
You can either give that <li> an id or a class. Otherwise you can use a selector, see: Nested classes selectors
For some weird reason i cant change the background of the entire list item even though i selected the list.
Here is the code:
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
<style>
.project-item>ol>li:hover {
background-color: #eee;
}
</style>
The code you posted works fine. See this example.
.project-item>ol>li:hover {
background-color: #eee;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
This code seems to work.
Change the colors its pretty hard to see a gray color on a white background.
.project-item ol li:hover {
background-color: firebrick;
}
<div class="project-item" ng-controller="openProjectsCtrl">
<ol>
<li class="list-item" ng-repeat="project in projects | orderBy:'Posted' : true">
<h4>{{project.Title}}</h4>
{{project.Skills}}
<span class="col-md-6">{{project.Budget}}</span>
<span class="col-md-6 timestamp">{{project.Posted|timeago}}</span>
</li>
</ol>
</div>
I resolved the issue by removing float left on first span and just having a float right. That seemed to work.
OK, i have no idea how it append, this form : http://xquives.kiaistudio.com/new-form/index.php have a two column field. But in IE7 it's in one column, but not in ie8 or 9 or FF of chrome. Can you please tell me what BAD i have done, or how to make IE behave like normal browser. I have take more that 2 hours testing... and i have NO IDEA where to look !
You're markup doesn't lend itself well to crappy ie7. You're markup looks generally like this:
<ul>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
</ul>
This is pretty error prone.
You'd be better off with parent containers that drive the columns like so:
<div style="width: 50%; float: left">
<ul>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
</ul>
</div>
<div style="width: 50%; float: left">
<ul>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
</ul>
</div>
EDIT: if you're married to this markup structure, you can hack ie7 by adding:
UL{*overflow:visible;}
.autocolumn LI {*width: 48%;}
The better thing to do is layout your columns in a way like i've described above
I can't seem to figure out how to change the height of list items in a jquery mobile navbar. I've looked through all the css and tried changing everything I've found but nothing has worked so far. Hope someone can help!
Here's the code:
<div data-role="page" data-theme="a">
<div data-role="header" style="background: url('../images/stripe.gif') repeat top left;">
<div data-role="navbar">
<ul class="custom-navbar">
<li>Sun</li>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Thu</li>
<li>Fri</li>
<li>Sat</li>
</ul>
Here's a link to see how it's rendering. The 7 items at the top (the days of the week), as you can see have lots of space above and below them inside their borders. I want much less space there.
<ul class="custom-navbar ui-grid-f">
<li class="ui-block-a"><span class="ui-btn-inner"><span class="ui-btn-text">Sun</span></span></li>
<li class="ui-block-b" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Mon</span></span></li>
<li class="ui-block-c" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Tue</span></span></li>
<li class="ui-block-d" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Wed</span></span></li>
<li class="ui-block-e" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Thu</span></span></li>
<li class="ui-block-c ui-block-f" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Fri</span></span></li>
<li class="ui-block-g" style="margin-left: -5px;"><span class="ui-btn-inner"><span class="ui-btn-text">Sat</span></span></li>
</ul>
There is your initialized grid. You can see that I added padding-left: -5px to all but the first <li> element to take away the space between them. I would either use a class to add the margin to the elements or if you are targeting browsers that support CSS3 then you can use the :nth-child() selector to get all but the first <li> element.
Update
Here is how to change your code so that it will look like the above code after jQuery Mobile initializes it:
<ul class="custom-navbar">
<li>Sun</li>
<li style="margin-left: -5px;">Mon</li>
<li style="margin-left: -5px;">Tue</li>
<li style="margin-left: -5px;">Wed</li>
<li style="margin-left: -5px;">Thu</li>
<li style="margin-left: -5px;">Fri</li>
<li style="margin-left: -5px;">Sat</li>
</ul>