This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 6 days ago.
#p1 a,#p2 a,#p3 a,#p4 a,#p5 a, etc.
I have thousands of them.
How can I specify all of them with CSS
tried #p*
tried id^="p"
Works for me.
[id^="p"] a {
color: red;
}
[id^="z"] a {
color: green;
text-decoration: none;
}
[id^="z"] a:hover {
color: blue;
text-decoration: underline;
}
<p id="p1">P One</p>
<p id="p2">P Two</p>
<p id="p3">P Three</p>
<p id="p4">P Four</p>
<p id="z1">Z One</p>
<p id="z2">Z Two</p>
<p id="z3">Z Three</p>
<p id="z4">Z Four</p>
But I’m sure you could find a better selector than "id starts with p". Giving all the relevant links a class would seem a more robust solution.
You are styling on <a> tag so after all id put descendant combinators selector "a" like below
[id^="p"] a{
color: "red";
}
Related
I have some code that I think may be bulky and could be simplified. I haven't found anything that helps in my situation. I am trying to make it so that when I hover over a div, an h2 and p get underlined. It works fine like this:
.test:hover h2, .test:hover p {
text-decoration: underline;
}
But I was wondering if I could simplify it in some way, not having to repeat .test:hover twice.
If you don't need to support Internet Explorer this can be accomplished with the :is pseudo-class:
.test:hover :is(h2, p) {
text-decoration: underline;
}
<div class="test">
<h1>An H1</h1>
<h2>An H2</h2>
<p>A paragraph</p>
</div>
An alternative would be to leverage a CSS preprocessor like Sass or Less, both of which support nesting which can make for DRY-er, more expressive style source code. This may be overkill in your case, though. Here's an example in Sass' SCSS format:
.test:hover {
h2, p {
text-decoration: underline;
}
}
There is a new pseudo-class :is which will allow this..
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
.test:hover :is(h2, p) {
color: red;
text-decoration: underline;
}
<div class="test">
<h2>Heading</h2>
</div>
<div class="test">
<p>Lorem ipsum dolor sit amet.</p>
</div>
You can use it:
:is(h1, p) .test:hover {
text-decoration: underline;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 11 months ago.
The community reviewed whether to reopen this question 11 months ago and left it closed:
Original close reason(s) were not resolved
Referring to this Stackover question from 2009 (Is there a "previous sibling" selector?), it seems that it was not possible then.
Here are two small examples that illustrate the problem
both elements touched by the CSS are under the triggering element.
In example two one Element is above the triggering element and the other remains below it. As a result, the sibling selector does not affect the element on top.
Example one
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="" id="nocheck">ENABLE</div>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
Example 2
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<div class="" id="nocheck">ENABLE</div>
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
It's the same issue as with a parent selector, CSS can only see DOWN the DOM not back up. As in it can only see future siblings, children, children of children etc.
Safari I think has implemented the :has() pseudo class in one of their dev versions but they are a small browser and Chrome has yet to implement anything.
You might get duped as a few questions on here, this is probably a useful one:
Is there a CSS parent selector?
Kevin Powell has a great video
https://www.youtube.com/watch?v=2-xdcDsqsAs
This question already has answers here:
Why can't I use a heading tag inside a p tag and style it with CSS?
(5 answers)
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
Closed last year.
I want to override the css of <h1> and <h2> using selector (specific using selector only) but it's not working. It's getting only applied to one class only <h1> color changes to green not <h2>.
Please help can someone tell me where I am wrong. Please help!
.temp {
color: blue;
}
.temp2 {
color: red;
}
p .temp,.temp2{
color: green !important;
}
<p>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</p>
Try this:
.temp {
color: blue;
}
.temp2 {
color: red;
}
div .temp,
div .temp2{
color: green !important;
}
<div>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</div>
.temp {
color: blue;
}
.temp2 {
color: red;
}
span .temp, .temp2{
color: green !important;
}
<span>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</span>
Answer:
putting h1/h2 content inside p is invalid (You might have noticed in Stack overflow's snippet editor)
Imagine having a huge heading inside small paragraph
so change to span/div/etc (in html+css)
You have missed to mention the paragraph element for temp2
.temp {
color: blue;
}
.temp2 {
color: red;
}
p .temp,p .temp2{
color: green !important;
}
<p>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</p>
Imagine that the HTML and CSS below is already set.
What CSS rules can I add beneath the already-written CSS to make the red paragraphs display as red?
body,
div {
display: flex;
flex-wrap: wrap;
}
p {
margin: 6px;
}
.one-filter-one p,
p[class^="one-filter-one"] {
color: blue;
}
.two-filter-two p,
p[class^="two-filter-two"] {
color: green;
}
.four-filter-four p,
p[class^="four-filter-four"] {
color: orange;
}
<p class="another-class">This is red.</p>
<p>This is red.</p>
<div class="one-filter-one">
<p>This is blue.</p>
<p class="one-filter-one--paragraph">This is blue.</p>
</div>
<p class="two-filter-two">This is green.</p>
<p>This is red.</p>
<p class="another-class-two">This is red.</p>
<div class="three-filter-three">
<p>This is unstyled (black).</p>
<div><p>This is unstyled (black) too.</p></div>
</div>
<div class="four-filter-four">
<p class="four-filter-four--sentence">This is orange.</p>
</div>
<p class="five-filter-five">This is also unstyled (black).</p>
<div class="another-class-three">
<p>This is red.</p>
<p class="another-class-four">This is red.</p>
</div>
My best guess is to use the :not() pseudo-class.
But I'm not entirely convinced this is the right approach, principally because I'm not sure that :not() can handle this case.
My attempt at a solution, using :not():
body,
div {
display: flex;
flex-wrap: wrap;
}
p {
margin: 6px;
}
.one-filter-one p,
p[class^="one-filter-one"] {
color: blue;
}
.two-filter-two p,
p[class^="two-filter-two"] {
color: green;
}
.four-filter-four p,
p[class^="four-filter-four"] {
color: orange;
}
p:not([class*="-filter-"]) {
color: red;
}
<p class="another-class">This is red.</p>
<p>This is red.</p>
<div class="one-filter-one">
<p>This is blue.</p>
<p class="one-filter-one--paragraph">This is blue.</p>
</div>
<p class="two-filter-two">This is green.</p>
<p>This is red.</p>
<p class="another-class-two">This is red.</p>
<div class="three-filter-three">
<p>This is unstyled (black).</p>
<div><p>This is unstyled (black) too.</p></div>
</div>
<div class="four-filter-four">
<p class="four-filter-four--sentence">This is orange.</p> </div>
<p class="five-filter-five">This is also unstyled (black).</p>
<div class="another-class-three">
<p>This is red.</p>
<p class="another-class-four">This is red.</p>
</div>
Clearly this is not it, because I am not correctly selecting:
NOT descendant elements of [class*="-filter-"].
But I'm not clear how to do this at all.
Is there any way to do this, or am I looking to achieve the impossible in 2020, given CSS's contemporary capabilities?
Notes:
Although, in 2020, the pseudo-class :not() has been around for the best part of a decade I've always tended to avoid using it. The only thing I do know is that the :not() pseudo-class function can only take simple (ie. not compound) selectors.
Added:
Based on #G-Cyrillus' brilliant suggestion (in the comments, immediately below), I have come up with the following:
body > p:not([id*="-filter-"]):not([class*="-filter-"]),
body > :not([class*="-filter-"]) > p:not([id*="-filter-"]):not([class*="-filter-"]),
body > :not([class*="-filter-"]) > :not([class*="-filter-"]) > p:not([id*="-filter-"]):not([class*="-filter-"]),
body > :not([class*="-filter-"]) > :not([class*="-filter-"]) > :not([class*="-filter-"]) > p:not([id*="-filter-"]):not([class*="-filter-"]),
body > :not([class*="-filter-"]) > :not([class*="-filter-"]) > :not([class*="-filter-"]) > :not([class*="-filter-"]) > p:not([id*="-filter-"]):not([class*="-filter-"]) {
color: red;
}
On the plus side this does work. (So, infinitely better than anything I had before).
On the minus side:
it's verbose
it's inelegant
it only works to the fourth level of element-nesting
I can of course carry on adding levels, but that only makes it verboser and ineleganter
This has been a educational exercise.
The most significant thing it's taught me is that, given that :not() cannot accept compound selectors, it's very far from straightforward to handle subsequent nested levels of markup after applying :not().
Given the following:
.filter-1 {
color: red;
}
:not([class^="filter-"]) p {
color: blue;
}
<div>
<div>
<p>Test.</p>
</div>
</div>
<div class="filter-1">
<div>
<p>Test.</p>
</div>
</div>
the second <p> still shows up blue.
Why? Because even though its grandparent has the class .filter-1, its immediate parent does not... and that's enough to satisfy the any descendant selector (ie. the [SPACE]) preceding the p in the CSS Rule:
:not([class^="filter-"]) p
The only way to get around this is to replace the rule with:
:not([class^="filter-"]) > * > p
and this now works:
.filter-1 {
color: red;
}
:not([class^="filter-"]) > * > p {
color: blue;
}
<div>
<div>
<p>Test.</p>
</div>
</div>
<div class="filter-1">
<div>
<p>Test.</p>
</div>
</div>
But...
the CSS Rule is now tightly bound to the HTML structure and the amended CSS rule above won't now apply to:
<div class="filter-2">
<p>Test.</p>
</div>
See:
.filter-1 {
color: red;
}
:not([class^="filter-"]) > * > p {
color: blue;
}
<div>
<div>
<p>Test.</p>
</div>
</div>
<div class="filter-1">
<div>
<p>Test.</p>
</div>
</div>
<div class="filter-2">
<p>Test.</p>
</div>
Instead, we now need to use two rules:
:not([class^="filter-"]) > p,
:not([class^="filter-"]) > * > p
The following conclusion emerges:
We can only use :not() to exclude descendants when we also explicitly
describe the HTML structure in the CSS.
I now understand much more clearly what #G-Cyrillus meant by:
You need to mind the structure too
Next Steps:
Describing an infinite number of potential descendant structures in my CSS is clearly impractical, so I've:
1) reconfigured my architecture to allow more complex descendant relationships to be described elsewhere
and
2) optimised my exclusion query to:
body > :not([id^="filter-"]):not([class^="filter-"])
Thanks very much again, #G-Cyrillus - I've only made it as far as this due to your substantial assistance in the comment section.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is an angular app that displays a list of movies.
Link to plunker here: https://plnkr.co/edit/nSpPKefitlnDjoev3b0w?p=preview
In short, there are 6 elements in the ng-repeat loop to display the movies, and they are placed one next to the other with no margin, but with varying widths and colors depending on the order in which they appear(based on my limited understanding).
Index.html:
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div ng-repeat="show in shows">
<div class="rank">{{$index + 1}}</div>
<div class="img_container">
<img class="img-responsive" ng-src="{{show.series_img}}">
</div>
<h2 class="series">{{show.series}}</h2>
<p class="genre">{{show.genre}}</p>
<p class="run-start">{{show.run_start}}</p>
<p class="description">{{show.description}}</p>
</div>
</div>
</div>
</div>
The interaction of these rules is what I find particularly confusing:
div.ng-scope:nth-child(odd) h2 {
width: 400px;
}
div.ng-scope:nth-child(even) p+p {
width: 400px;
}
p {
background: #f9f9f9;
display: block;
float: left;
font-size: 18px;
height: 200px;
margin: 0;
padding: 30px;
width: 200px;
}
div.ng-scope p+p {
background: #e5e5e5;
}
div.ng-scope p+p+p {
background: #000;
color: #fff;
font-size: 14px;
width: 800px;
}
I would also appreciate any links to tutorials explaining how ng-scope works in this context.
div.ng-scope selects the <div ng-repeat="show in shows"> element because the ng-repeat adds the ng-scope class to the element when it renders.
nth-child(odd) and nth-child(even) set the styles of the odd and even children of the elements' respective containers, respectively.
p affects all <p> elements, while p+p affects all <p> elements following immediately after another <p> element. p+p+p affects all <p> elements immediately following two <p> elements.
Check out this article for more information about the plus symbol in css: What does the "+" (plus sign) CSS selector mean?