assuming i have a structure like this (and can't modify it):
<ul>
<li class="common"> <p>First A</p> </li>
<li class="common"> <p>Second A</p> </li>
<li class="common"> <p>Third A</p> </li>
<li class="common"> <p><b>SELECT ME</b></p> </li>
<li> <p>First B</p> </li>
<li> <p>Second B</p> </li>
<li> <p>...</p> </li>
</ul>
Is there a way to select the last element with class "common"? (in this case the fourth element)
First i tried selecting a subset with:
.common{
background: red;
}
and it worked correctly. So i tried selecting last-child of them, with:
.common:last-child{
background: green;
}
but not luck. i also would like to avoid adding a class for that element.
Jsfiddle
EDIT: i simplified classes and selectors to make it cleaner
Is there a way to select the last element with class "common"?
No, not with a CSS selector without modifying the HTML.
what about
.common:last-of-type {
background: green;
}
You can use JavaScript or jQuery
$('custom').prev().css('color', 'red');
If your not against a JS route you could do this
$('li.common.custom').first().prev('.common').css('background','yellow');
It finds the first element that has both .common and .custom classes and then goes to the previous element. So its technically the last element that only has .common
https://jsfiddle.net/89z20341/
Is the structure going to stay exactly as you have coded it? eg with the bold tags on the element you want to select?
if so could you just do this
.common p b{
background: green;
display:block;
}
http://jsfiddle.net/seLm589s/4/
Related
I have this div
<div>
Questions about these terms
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
i have other divs
<div>
content here...
</div>
within the same document. I want to bold this text in particular
**Questions about these terms**
<ol class="alphabetical">
that occurs just before this class <ol class="alphabetical">
and this doesnt work
.alphabetical::before {
font-weight:bold !important;
}
Is there a way i can target the text in plain css?
Different ways to do this, some methods are
Wrap text you want to be bold i html <b></b>-tags
Wrap text you want to be bold i html <span></span>-tags, then style that span with css
Set font-weight on parent div, then use font-weigth: initial; on the ol-element selector.
You can not access this text with that selector.
Instead, wrap it to another inline element like span, b, or others, and then get this element with selector:
span.header {
font-weight: bold;
}
<div>
<span class="header">Questions about these terms</span>
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
See: How ::before works.
Update:
If you want to get this text without wrapping it you can use this:
<div class="container">
Questions about these terms
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
/* Selects each <div>, but only if it is the */
/* only <div> element inside its parent */
/* without container class */
div:only-of-type {
font-weight: bold;
}
div > * {
font-weight: initial;
}
Just wrap the text in a div or p (or both) and give that a class and style it. For example:
<div>
<p class="foo">Questions about these terms </p>
<ol class="alphabetical">
<li>
<div>If you have any questions about these terms or the Platform, you may contact us by email at
support#example.como.</div>
</li>
<li>
<div>Our VAT number is {vat}.</div>
</li>
</ol>
</div>
And the css:
.foo {
font-weight: bold;
}
This question already has answers here:
CSS selector for targeting only immediate children and not other identical descendants
(2 answers)
Closed 2 years ago.
I use CSS Modules which generates random class names for my tags. How can I select an element of specific type without selecting descendants? So far I've tried to use selectors :first-of-type and :first-child like this:
.settings ul:first-of-type > i:first-child {
opacity: 0.5;
}
But the result is that my rule applies to every <i> element on my page.
HTML:
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
Use the CSS child combinator >:
.settings > ul > li > i {
opacity: 0.5;
}
<div class="settings">
<ul>
<li>
<i>Select this element</i>
<ul>
<li>
<i>but not this one</i>
<span></span>
</li>
<li>
<i>or not this one</i>
<span></span>
</li>
</ul>
</li>
</ul>
</div>
The child combinator (>) is placed between two CSS selectors. It
matches only those elements matched by the second selector that are
the direct children of elements matched by the first.
I'm using :target in html and I code something like that:
<div class="1">
<div>
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
and I've done this in css:
.ex ul {
display: none;
}
.ex ul:target {
display: block;
}
I need to make so that when you click on the link (in this case the words 'link to part 2') the #2 ul show, (alredy done this) and the ul whit the link disappears, how can I do?
One way this can be accomplished is with JavaScript. I added the id remove-on-click to your link which you want removed, and then created a JavaScript event listener to alter the style of this item when it is clicked. You can see the code working here.
<div class="1">
<ul>
link to part 2
</ul>
</div>
<div class="ex">
<ul id="2">
<p>hi</p>
</ul>
</div>
<script>
document.getElementById('remove-on-click').addEventListener('click',function(){
this.style.display = "none";
})
</script>
I did not edit any of your other code, but keep in mind that ul tag should be used with li descendants. If you do not have a li descendant, use another tag, such as a div. Also, you may want to become more familiar with proper naming of class and id attributes, especially in regards to not beginning them with a digit:
https://www.w3.org/TR/CSS2/syndata.html#characters
What are valid values for the id attribute in HTML?
The key consideration to note is that you must write the markup in reverse order.
This is because CSS selectors can only select:
an element itself (or a pseudo-element)
an element's descendant elements
an element's subsequent siblings
It cannot select an ancestor element or (in this scenario) a previous sibling.
Once you have written the markup in reverse order, you can achieve the effect you want using CSS.
Working Example:
#part2,
#part3 {
display: none;
}
#part2:target,
#part3:target {
display: block;
}
#part2:target ~ [id^="part"],
#part3:target ~ [id^="part"] {
display: none;
}
<div id="part3">
<p>This is Part 3.</p>
</div>
<div id="part2">
<p>This is Part 2.</p>
<ul>
<li>Link to Part 3</li>
</ul>
</div>
<div id="part1">
<p>This is Part 1.</p>
<ul>
<li>Link to Part 2</li>
</ul>
</div>
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)
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.