This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 1 year ago.
Ok, so I've got a little trouble here, I'm creating a div that'll be the child of another div and will be the parent of
•ul,
•obviously li &
p elements
my trouble is that I need to style every first child starting with the first div, I know that :first-child pseudo-class will make the trick, 'cause I've used it too much, given this markup fragment
div>ul,
p:first-child {
border: 4px solid red;
}
<div>
<div>
<ul>
<ul>
<li>
<p>Item 1</p>
<p>Item 2</p>
</li>
<li></li>
<li></li>
<p>Yesterday</p>
<p>Today</p>
<li></li>
<li>
</li>
<li>
</li>
<li>
<p>Item 3</p>
</li>
<li>
<p>Item 4</p>
</li>
</ul>
</ul>
</div>
</div>
I can't really understand why Chrome DevTools apply the styles but grays me out the p:first child selector in the console, as seen in this image
Related
This question already has an answer here:
List of HTML5 elements that can be nested inside P element?
(1 answer)
Closed 1 year ago.
I am not new to CSS, and I know there is a simple solution to this, but I just cannot find it anywhere (I am drawing a blank on the solution).
I have the following code:
<p class="paragraph">
blablabla, some text here!
<ol>
<li class="nobullet">
<p class="bold">Related Articles</p>
</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
</ol>
</p>
<p class="footer">
<ol>
<li class="nobullet">
<p class="bold">Non-Related Articles</p>
</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
</ol>
</p>
I want to add the rule "color:red" to only the list items in the ordered list within the paragraph element with the class of "paragraph" (So only the first Ordered List).
I have tried...
.paragraph ol li{color:red;}
.paragraph, ol, li{color:red;}
The second one works; however, it also styles the other OL element as well!
Thanks in advance!
The reason this isn't working is because paragraph elements cannot contain other block elements.
Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
If you inspect the resulting html, you will see the <p> tag is automatically closed before the <ol>, so your css rule no longer applies.
I suggest you do the following (as a variant)
.paragraph p,
.paragraph a:link,
.paragraph a:visited {
color: red;
}
<div class="paragraph">
blablabla, some text here!
<ol>
<li class="nobullet">
<p class="bold">Related Articles</p>
</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
</ol>
</div>
<div class="footer">
<ol>
<li class="nobullet">
<p class="bold">Non-Related Articles</p>
</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
<li>ArticleName</li>
</ol>
</div>
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.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
CSS selector for "foo that contains bar"? [duplicate]
(3 answers)
Closed 3 years ago.
I want to apply the page-break-inside:avoid property to all p elements that do not have a ul element.
p {
margin-top: 4pt !important;
margin-bottom:6pt !important;
page-break-inside:avoid;
orphans: 4;
widows: 2;
}
<p>Hello text </p>
<p>hello <ul>
<li>list </li>
</ul>
I want to exclude the second paragraph. Is it possible through CSS? I am looking for a CSS solution.
You can't use the ul inside a p element. As for the identifier topic, the only option for this would be to use the :has pseudo class, but it's still not compatible.
You can check its documentation here.
Revise your code to improve the structure.
What you could do is something like this:
<p>First paragraph</p>
<p>Second paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
<p>Third paragraph</p>
<p>Fourth paragraph</p>
This way if you want to affect a ul that's right after a p you could use this selector:
p ~ ul {
color: red;
}
//Selects every <ul> element that are preceded by a <p> element
Your code is not valid. p elements can only contain phrasing content https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element
This question already has answers here:
Combining :last-child with :not(.class) selector in CSS
(2 answers)
Closed 6 years ago.
How can I select last li that doesn't have the .hidden class?
I have HTML and CSS like this:
ul li:last-child:not(:first-child):not(.hidden) button {
background-color: red;
}
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>
At the current moment, there is no CSS way of being able to find an element that is then followed by another specific element.
Possibly soon, there will be the CSS Relational Pseudo-class :has() which will make what you want possible. This is currently in the CSS Selectors Level 4 Draft and looks unlikely to be rolled out across any browsers any time soon.
A demo is below but don't expect it to work until the Selectors 4 Draft is at least in Working Draft.
Keep an eye on CanIUse to see when it becomes readily available.
ul li:has(+ .hidden:last-child),
ul li:last-child:not(.hidden) {
background: red;
}
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>
:has() is available in jQuery though, so here's a jQuery alternative
Read more here from the Official jQuery Docs
$('ul li:has(+ .hidden:last-child), ul li:not(.hidden):last-child').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li class="hidden">
<button>3</button>
</li>
</ul>
The CSS :nth and :last-child pseudo selectors can only work with tags and not other selectors like :not or class but if there is always going to be only one .hidden li at the end, then you could use something like this:
li:nth-last-child(2) { background: lightblue; }
<ul>
<li>1</li>
<li>2</li>
<li class="hidden">3 hidden</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="hidden">4 hidden</li>
</ul>
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/