How to access this element with CSS - html

I have this autogenerated code in HTML.
How can I get the span class icon with CSS to modify it when hover.
I can not call .icon because I will change all the icons on the page and I just want to change this one.
<li class="level1 item156">
<a class="carpo1 level1" href="/carpooling" title="carpoT">
<span>
<span class="icon" style="background-image: url('http://thebackpackerweb.estrategic.es/images/EntregaProyecto/Icon_carpooling_h.png');"></span>
carpooling
</span>
</a>
</li>

I would maybe go with
.item156 .icon {
background: red;
}

This will work as you expect :
.item156 .icon:hover {
background: blue;
}

Give this particular span class an id and then change it according to your requirement.

Related

CSS selection query for just parent content

Say I have the following.
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
I only want to select the "$64 used", not the rest in the child spans. How would I do something like this? I have tried selecting like below and none work.
article > .price
article > .price:not(span)
article > div:not(span)
article > div:not(.originally):not(.you-save)
EDIT: For clarification..
const test = document.querySelector('section > div.price');
console.log(test.innerText);
$64 Used$160 New
You save 60%
I only want $64 Used. Is this even possible? I did not make the site, I am trying to scrape this.
div.price
do the work. For me, better is just use
.price.
Just make a small change:
<div class="price">
<span>$64 used</span>
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
CSS:
article > .price > span:not([class]) { color: red; }
This is not how tag:not() works. You can exclude a span tag from taking the style for span tags. But you can not select children this way.
Just apply a style to the div and overwride the properties for the children.
.price {
color: blue;
}
span.originally {
color: green;
}
span.you-save {
color: red;
}
<article>
<div class="price">$64 used
<span class="originally">$160 new</span>
<span class="you-save">You save 60%</span>
</div>
</article>

Exclude Element From CSS Class In Div

Is it possible to not apply a css class to a specific element in the class?
For example:
<div className="container-fluid bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href= {"https://www.linkedin.com"}><img src={linkedin} className={"linkedin"}/></a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!</p>
</div>
In this code I would like to exclude the img tag from the container class so the CSS isn't applied to that element. I know I could just make two separate divs of the same class and put the anchor tag in the middle but I want to know if I can do this programmatically.
div.dummy :not(a):not(img) {
background: black;
color: white;
font - size: 20 px;
width:100%;
height:50px;
position:relative;
}
<div class="container-fluid dummy bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href={ "https://www.linkedin.com"}>
<img src={linkedin} class={ "linkedin"}/>
</a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!
</p>
</div>
You can see in the above demo that except img tag, all are getting affected.
Try using :not selector
Read here consulting can i use
else have a particular css for the img overriding any css you want.
The`:not(selector) selector matches every element that is NOT the specified element/selector.
:not(.container>img) {
background-color: blue;
//your css here
}

How do you color HTML symbols like x's and checkmarks?

I would like to make the x's red and the checkmarks green, but confused how to since it's a dingbat HTML code.
<li><b>HD</b> Available &#10006</li>
<li><b>Commercial</b> Free &#10006</li>
<li><b>Unlimited</b> Movies/TV Shows &#10004</li>
<li><b>Cancel</b> Anytime &#10004</li>
Simply wrap each in a <span> tag and give it a .check or .cross class. Then it's just a matter of adding the color to each of the classes:
.cross {
color: #ff0000;
}
.check {
color: #00ff00;
}
<li><b>HD</b> Available <span class="cross">&#10006</span></li>
<li><b>Commercial</b> Free <span class="cross">&#10006</span></li>
<li><b>Unlimited</b> Movies/TV Shows <span class="check">&#10004</span></li>
<li><b>Cancel</b> Anytime <span class="check">&#10004</span></li>
Wrap them in a span and then color the span. Use a class name like checkmark and x.
See code snippet below:
.x{
color:red;
}
.checkmark{
color:green;
}
<ul>
<li><b>HD</b> Available <span class="x">&#10006</span></li>
<li><b>Commercial</b> Free <span class="x">&#10006</span></li>
<li><b>Unlimited</b> Movies/TV Shows <span class="checkmark">&#10004</span></li>
<li><b>Cancel</b> Anytime <span class="checkmark">&#10004</span></li>
</ul>
You could put it in a span tag and add a class like
<li><b>HD</b> Available <span class="coloring">&#10006</span></li>
<li><b>Commercial</b> Free <span class="coloring">&#10006</span></li>
then set color in css like
.coloring {
color:red;
}
See sample: https://jsfiddle.net/axz16nqe/1/

Using CSS to Highlight Current Page

I want to highlight current page by using CSS, but somehow it doesn't work. Please take a look at my code below.
HTML
<body id="home">
<div id="mainNav">
<a href="/Dashboard/Index" id="navIndex">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/dashBoard.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Dashboard</span>
</div>
</a>
<a href="/samples/register/" id="navRegister">
<div class="circle text-uppercase">
<div class="icon23X27"><img src="~/Content/icons/samples.png" width="23px" height="27px" align="middle" /></div><span class="textStyle">Sample Registration</span>
</div> </a>
<a href="/samples/search/">
.........
</div>
CSS
body#/samples/register a#navRegister .textStyle {
background-color:red !important
}
The syntax is wrong. Use this way:
body a#navRegister[href="/samples/register"] .textStyle {
background-color:red !important
}
Yours is a worst example of having div inside <a>, which is similar to having a bottle inside some water, not water inside bottle, which is right one.
Take your body ID, in this case #home and combine it with the id on the home nave element, in this case #navIndex:
#home #navIndex .textStyle {
background-color: red;
}
Then you can add a selector for each of your pages to catch the current page in the nav with css alone:
#home #navIndex .textStyle,
#register #navRegister .textStyle {
background-color: red;
}
Drop the !important it's only necessary in a couple of edge cases in css and should be avoided (I appreciate one of those edge cases is just trying to definitely make a selector show some visible effect, which may well be what you're doing with the posted css).
You'd also benefit from using classes instead of ids as css selectors.
Caveat:
It's probably better to render this in the html server side as the server can use the request URL to decide which nav item is current. That way you can just add a selected-nav-text class to your current nav span and your css becomes:
.selected-nav-text {
background-color: red;
}
This is simpler, you can write logic once server side to calculate the current nav and css once to highlight it, then when you change your nav the functionality will come instantly.

Li display inline within a div that has max width

<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.