Given the following HTML markup, I want to apply (S)CSS only when 2 of the same elements exist (not when 1 exists).
I don't want to use JavaScript to count the number of elements and apply another class, however, I feel this is the only approach.
div {
a + a {
// I want to apply styles to both a tags, not just the second one
// WHEN 2 a tags exists
}
}
<div>
Home
About
</a>
You can use "quantity queries". For exactly TWO...
a:nth-last-child(n+2):nth-last-child(-n+2):first-child,
a:nth-last-child(n+2):nth-last-child(-n+2):first-child ~ a {
}
Source: https://quantityqueries.com/
a:nth-last-child(n+2):nth-last-child(-n+2):first-child,
a:nth-last-child(n+2):nth-last-child(-n+2):first-child~a {
color: red
}
<div>
Home
About
</div>
<div>
Home
</div>
<div>
Home
About
More
</div>
UPDATE: the initial question stated "2 or more of the same elements exist" but was updated later ...
You can do it like below:
a:first-child:nth-last-child(n + 2),
a ~ *{
color:red;
}
<div>
Home About
</div>
<div>
Home About Home About
</div>
<div>
Home
</div>
Or like below too:
a:not(:only-child){
color:red;
}
<div>
Home About
</div>
<div>
Home About Home About
</div>
<div>
Home
</div>
are you using pre-compilor?
then
div a:nth-child(n+2) {
background: red
}
<div>
Home
About
</a>
For Scss, following code should work
div {
& a:nth-child(n+2) {
// css instruction
}
}
Related
How to hide text with .CSS?
Here is our code.
<footer>
<p>Our Company, OFFICE: 555-1212</p>
<div class="footer_License"><span>License #:</span> RB-21781</div>
<p>Terms
Leads by
HideThis<span id="hide-logo"><img src="/modules/free_home_valuation/images/Logo.png" alt="HideThis" /></span></p>
</footer>
We want to Hide all but:
Our Company, OFFICE: 555-1212
License #:RB-25555
Terms of Service Privacy Policy
Any suggestions?
The easiest way is to assign a class to the element(s) you wish to hide.
Because there are multiple elements, and some text that is not inside a container (such as the a tag), I wrapped the elements you wish to hide in a span, and added a class (that I called hideme) onto that span.
If you ever wish to remove the hide class and display the information, I added a button and some javascript code to show how easily that is done.
//Look closely - this is not jQuery
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
$('#showme').addEventListener('click', (e) => {
const allHidden = $$('.hideme');
allHidden.forEach((el) => {
el.classList.remove('hideme');
});
console.log(e.target.innerText);
});
.hideme{display: none;}
<footer>
<p>Our Company, OFFICE: 555-1212</p>
<div class="footer_License">
<span>License #:</span> RB-21781
</div>
<p>
Terms of Service |
Privacy Policy |
<span class="hideme">
Leads by
<a href="http://www.sample.com/" target="_blank"> HideThis
<span id="hide-logo"><img src="Logo.png" alt="HideThis" /></span>
</a>
</span>
</p>
</footer>
<button id="showme">Show Me</button>
Note:
Remember that HTML is designed around the box model, which means that the entire web page is a box (container) that contains other boxes, which contain other boxes. Everything is either content (text/images), or a container, or is inside a container. Your job is to design what is inside of what so that you can best arrange/display it on the page, or show/hide it as desired.
You Can Use This code:
<style>
footer > p:first-child {
display: none;
}
.footer_License {
display: none;
}
footer > p > a:first-child
{
display: none;
}
</style>
Here, first-child property use to select the first element cild of any html element and > is use to go on the child or should I say to select the Child element of the tag.
footer > p:nth-of-type(2) > :not(:nth-child(-n + 2)) {
display: none;
/* visibility:hidden; */
}
This will hide any element in the second paragraph but the first and second children.
Choose "display" or "visibility" depending on what you mean by "hide"
footer > p:nth-of-type(2) > :not(:nth-child(-n + 2)) {
display:none;
}
<footer>
<p>Our Company, OFFICE: 555-1212</p>
<div class="footer_License"><span>License #:</span> RB-21781</div>
<p>Terms
Leads by
HideThis<span id="hide-logo"><img src="/modules/free_home_valuation/images/Logo.png" alt="HideThis" /></span></p>
</footer>
all answers are difficult you have to only use a one line of code display:none to hide and display:block in
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
}
Hello i have structure:
<section class="entry">
<div class="1">
<div class="IappearSometimes">text1</div>
<p class="ImAlwaysShowingText">text2</p>
</div>
</section>
I would like to hide by display:none p class .ImAlwaysShowingText element, only when div class .IappearSometimes appears.
By default class .ImAlwaysShowingText is always on screen and i want to hide it when class .IappearSometimes shows on.
I was trying by nth-child, ~ selector, but after 2 days of trying its hiding other elemtns on page, im really lost..
Can I select it somehow?
You can do it through jQuery
if ($('.IappearSometimes.').is(':visible')) {
$('.ImAlwaysShowingText').hide();
}
This will cause when element IAppearSometimes is visible on screen to hide ImAlwaysShowingText
This should work
.IappearSometimes ~ .ImAlwaysShowingText {
display: none;
}
<section class="entry">
<div class="1">
<div class="IappearSometimes">text1</div>
<p class="ImAlwaysShowingText">text2</p>
</div>
</section>
Edit: You can see here DEMO if .IappearSometimes exists .ImAlwaysShowingText will have display: none
I think this is enough (combined selector):
.IappearSometimes.ImAlwaysShowingText {
display: none;
}
EDIT: Sorry, no space in between the classes.
Here's a codepen (with another line added): http://codepen.io/anon/pen/pgybdL
I'm trying to find a way to create a "tabber" style navbar while using no scripting whatsoever. However I'm having issues figuring out how to make a default image appear when none of the other spans are the target. I am VERY new to CSS, so in addition to this question any recommendations are appreciated.
More in-depth description, usage, and restrictions can be found below the code.
CSS
/* Hide stage# images on page load */
.infobox .stages .stage1, .stage2, .stage3, .stage4 {
display:none;
}
/* Display Image when anchor link is clicked */
.infobox #thisstage1:target {
display:inline
}
.infobox #thisstage2:target {
display:inline
}
.infobox #thisstage3:target {
display:inline
}
.infobox #thisstage4:target {
display:inline
}
HTML
<table class="infobox">
<tbody>
<tr class="stages">
<!-- Tabber Style Navbar Containing Links -->
<td>
Stage 1
"-"
Stage 2
"-"
Stage 3
"-"
Stage 4
</td>
</tr>
<tr>
<!-- Images to show when corresponding span is targeted via above Links -->
<td>
<span class="stage1" id="thisstage1">
<a href="...stage1.png">
<img src="...stage1.png">
</a>
</span>
<span class="stage2" id="thisstage2">
<a href="...stage2.png">
<img src="...stage2.png">
</a>
</span>
<span class="stage3" id="thisstage3">
<a href="...stage3.png">
<img src="...stage3.png">
</a>
</span>
<span class="stage4" id="thisstage4">
<a href="...stage4.png">
<img src="...stage4.png">
</a>
</span>
</td>
</tr>
</tbody>
</table>
Detailed Description:
I have 4 links (Stage1, Stage2, Stage3, and Stage4). I also have 4 images. When I click on the links, I want the targeted image to be shown and all other images to disappear. The CSS is straightforward in accomplishing this much.
However, when the page is loaded and none of the links are the target, no image is displayed. I would like for Stage1.png to be shown if no other links are the target.
I tried this & a LOT of similar things with different selectors:
.thisstages .stage1 span:nth-last-of-type(4) [display=none] {
display:inline
}
.servantstages span:nth-last-of-type(4) [display=none] .stage1 {
display:inline
}
However, usually, Stage1 was shown directly before The targeted Stage. I'd also like to stay away from specifying attributes, like above, as I've read that it can slow things down. However, I'm new to this, so I don't have many options here. Any and all input is greatly appreciated.
Usage & Restrictions
I'm going to be implementing this on a Wikia specifically to reduce vertical scroll on mobile devices. On top of that, I am limited in what I can do as far as HTML is concerned. The HTML tags usable on Wikia are somewhat restricted, however I don't see this causing an issue. I'm avoiding scripting for 2 reasons. The first being that Wikia requires an approval window, and I have a bad habit of tweaking things. The second is mobile devices.
Other Notes
So it appears that using the method below by Mi-Creativity doesn't function correctly on some phones (Probably due to Wikia's JavaScript). So I played around some more with CSS trying to concentrate on using only display:. After a lot more searching I ran across several different methods of using combinators to achieve what I'm looking for. Here's the results (No guarantee on mobile compatibility, currently untested but hopeful):
CSS
.stages > .stage:target ~ .stage:last-child, .stages> stage {
display:none
}
.stages > :last-child, .stages > .stage:target {
display:block
}
HTML
<div>
Home
Link Text
Link Text
...More Links here if needed...
</div>
<div class="stages">
<div id="link2" class="stage">
...Content...
</div>
<div id="link3" class="stage">
...Content...
</div>
...More divs here if needed...
<div id="home" class="stage">
This is the default content, must be the last div nested in "stages"
</div>
</div>
This is from an answer to a similar one , JS Fiddle
As from a comment, to show the first panel when page load, set a display for only this one - depending on its id or add a unique class - , also giving the .show class an absolute positioning and top value to shift it down JS Fiddle 2
CSS:
.show {
display: none;
position:absolute;
top:38px;
width:calc(100vw - 10px);
height:300px;
}
#alarm {
top:38px;
display:block;
}
.2nd{
z-index: 10;
}
:target {
display:block;
}
HTML:
<div id="dashboard" class="row">
</div>
<div id="alarm" class="row show">
<div class="col-12" style="background-color:#009;height:300px"></div>
</div>
<div id="calendar" class="row show 2nd">
<div class="col-12" style="background-color:#C00;height:300px"></div>
</div>
<div id="weather" class="row show 2nd">
<div class="col-12" style="background-color:#0C0;height:300px"></div>
</div>
I am trying to change the background colour of PARAGRAPH 4 only. I want to leave Paragraph 2 alone (because it is after a H4). I have tried the not selector but can't seem to get the logic working right. Not wanting to use JavaScript, PHP or jQuery. Only pure CSS please.
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-title + .textwidget {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If the first child of .widget-wrap will only either be an h4.widget-title, or a p.textwidget (i.e. when the h4 is not present), simply use :first-child:
.widget-wrap > .widget-title {
background-color: yellow;
}
.widget-wrap > .textwidget:first-child {
background-color: red;
}
<div class="widget-wrap">
<h4 class="widget-title">Paragraph 1 in the div.</h4>
<p class="textwidget">Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<div class="widget-wrap">
<p class="textwidget">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
If there any other elements may appear before the first p.textwidget absent an h4.widget-title, that will complicate things slightly. You would use :not() with a sibling selector in that case, but if there can be a variable number of elements, you won't be able to do this reliably.
check this out
.widget-wrap:nth-child(2) .textwidget {
background-color: green;
color: white;
}
Why you being not using different class name or id for the paragraph 4. that will be more simple and crystal clear. I would rather suggest you to use.
In current code as class names are same for parent div and P hence the color is changing for all not only for h4. sl please kindly use these.
Html
<div class="widget-wrap">
<p class="textwidget redcolor">PARAGRAPH 4 INSIDE 2ND DIV.</p>
<p>PARAGRAPH 5 INSIDE 2ND DIV.</p>
</div>
CSS:
.widget-wrap .redcolor {
background-color: Red !important; /*use important if not works*/
}
so now all elements having class redcolor inside class widget wrap will be having background color red. you can use id or any other class name.
that will be more easier and best approach for than using the any other javascript etc.
It will add more css lines but that will not cause any harm to it.