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
}
}
I want to hide an anonymous-child div which has a child-div also. I want also to display the anonymous div by clicking on div#child2.
I don't have any authority to change/add/remove ids or classes.
So I did this:
<div id="parent">
<!-- the anonymous div which I want to hide and display by clicking on div#child-2 -->
<div>
<div id="Container1" >
<div id="Container1">
<object>.....</object>
</div>
</div>
</div>
<div onclick="appear()" id="child-2">
<div id="child-of-child"></div>
</div>
</div>
CSS
div#parent div:first-child {
display: none;
}
Javascript
<script type="text/javascript">
function appear() {
document.getElementById("Container1").document.display="block !important";
}
</script>
The problem is that this type of css has affected the div#child-of-child and div#Container1 because the css reffering to every first child of any div.
So, my first question is:
How can I hide the anonymous div without having any effect to another div and display that later by clicking on div#child-2.
Second:
In this type of javascript code the styling of "block !important" works as it is?
Third:
The div#child2 doesn't have any content by itself. It includes another div which has content. If I set on div#child2 an event like onclick="appear()"; it works?
Forth:
In case that there is no way to avoid any effect to other divs is there any way to display the anonymous div and div#Container1?
Try this to only hide the first child within the #parent div:
div#parent div:first-child div:first-child {
display: none;
}
EDIT
To make Container1 appear afterwards, do the following in js (notice: I removed `!important' as I don't believe that is allowed, removing it made the code work - you can try it out below through the Fiddle link):
function appear() {
document.getElementById("Container1").style.display="block";
}
FIDDLER
<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
This code doesn't apply the width of my div
.column-hide {
width: 16.666666666666664%!important;
}
.column-hide * {
display: none;
}
While this works
.column-hide * {
display: none;
}
.column-hide {
width: 16.666666666666664%!important;
}
Any advice?
UPDATE: HTML CODE
<div class="col-md-6 column-hide">
<div class="header-label bg-gray custom-attr-header">
</div>
<div class="fields-body">
<h4 class="pull-left">Texts</h4>
</div>
</div>
An Asterisk (*) is the universal selector for CSS. It matches a single element of any type. So I;ll not suggest to avoid this universal selector. I felt many time if you define same property the last one applied always.
Here is the Working Example.
here is the HTML code and CSS. The last one property will apply to element.
p{color:red;}
p{color:green;} /*will take me as I am defined at last*/
<p>I'll be RED</p>
<p>I'll be GREEN</p>
As you can see the color:green applied at last so <p> element color will be green. same theory will apply in your case as well.
* {
display:none
}
will shows no element of html as * means all element.By using current posted code nothing is showing up. In order to display the content need to remove the above property
Here is what I am trying to accomplish in HTML/CSS:
I have images in different heights and widths, but they are all under 180x235. So what I want to do is create a div with border and vertical-align: middle them all. I have successfully done that but now I am stuck on how to properly a href link the entire div.
Here is my code:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
</div>
Please note that for the sake of copy pasting here easily, the style code is inline.
I read somewhere that I can simply add another parent div on top of the code and then do a href inside that. However, based on some research it won't be valid code.
So to sum it up again, I need the entire div (#parentdivimage) to be a href link.
UPDATE 06/10/2014: using div's inside a's is semantically correct in HTML5.
You'll need to choose between the following scenarios:
<a href="http://google.com">
<div>
Hello world
</div>
</a>
which is semantically incorrect, but it will work.
<div style="cursor: pointer;" onclick="window.location='http://google.com';">
Hello world
</div>
which is semantically correct but it involves using JS.
<a href="http://google.com">
<span style="display: block;">
Hello world
</span>
</a>
which is semantically correct and works as expected but is not a div any more.
Why don't you strip out the <div> element and replace it with an <a> instead? Just because the anchor tag isn't a div doesn't mean you can't style it with display:block, a height, width, background, border, etc. You can make it look like a div but still act like a link. Then you're not relying on invalid code or JavaScript that may not be enabled for some users.
Do it like this:
Parentdivimage should have specified width and height, and its position should be:
position: relative;
Just inside the parentdivimage, next to other divs that parent contains you should put:
<span class="clickable"></span>
Then in css file:
.clickable {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 1;
}
The span tag will fill out its parent block which is parentdiv, because of height and width set to 100%. Span will be on the top of all of surrounding elements because of setting z-index higher than other elements. Finally span will be clickable, because it's inside of an 'a' tag.
Going off of what Surreal Dreams said, it's probably best to style the anchor tag in my experience, but it really does depend on what you are doing. Here's an example:
Html:
<div class="parent-div">
Test
Test
Test
</div>
Then the CSS:
.parent-div {
width: 200px;
}
a {
display:block;
background-color: #ccc;
color: #000;
text-decoration:none;
padding:10px;
margin-bottom:1px;
}
a:hover {
background-color: #ddd;
}
http://jsbin.com/zijijuduqo/1/edit?html,css,output
Two things you can do:
Change #childdivimage to a span element, and change #parentdivimage to an anchor tag. This may require you to add some more styling to get things looking perfect. This is preffered, since it uses semantic markup, and does not rely on javascript.
Use Javascript to bind a click event to #parentdivimage. You must redirect the browser window by modifying window.location inside this event. This is TheEasyWayTM, but will not degrade gracefully.
I'm surprised no one suggested this simple trick so far! (denu does something similar though.)
If you want a link to cover an entire div, an idea would be to create an empty <a> tag as the first child:
<div class="covered-div">
<a class="cover-link" href="/my-link"></a>
<!-- other content as usual -->
</div>
div.covered-div {
position: relative;
}
a.cover-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This works especially great when using <ul> to create block sections or slideshows and you want the whole slide to be a link (instead of simply the text on the slide). In the case of an <li> it's not valid to wrap it with an <a> so you'd have to put the cover link inside the item and use CSS to expand it over the entire <li> block.
Do note that having it as the first child means it will make other links or buttons inside the text unreachable by clicks. If you want them to be clickable, then you'd have to make it the last child instead.
In the case of the original question:
<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
<a class="cover-link" href="/my-link"></a> <!-- Insert this empty link here and use CSS to expand it over the entire div -->
<div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
<img src="myimage.jpg" height="62" width="180">
</div>
<!-- OR: it can also be here if the childdivimage divs should have their own clickable links -->
</div>
Make the div of id="childdivimag" a span instead, and wrap that in an a element. As the span and img are in-line elements by default this remains valid, whereas a div is a block level element, and therefore invalid mark-up when contained within an a.
put display:block on the anchor element. and/or zoom:1;
but you should just really do this.
a#parentdivimage{position:relative; width:184px; height:235px;
border:2px solid #000; text-align:center;
background-image:url("myimage.jpg");
background-position: 50% 50%;
background-repeat:no-repeat; display:block;
text-indent:-9999px}
<a id="parentdivimage">whatever your alt attribute was</a>
This can be done in many ways.
a. Using nested inside a tag.
<a href="link1.html">
<div> Something in the div </div>
</a>
b. Using the Inline JavaScript Method
<div onclick="javascript:window.location.href='link1.html' ">
Some Text
</div>
c. Using jQuery inside tag
HTML:
<div class="demo" > Some text here </div>
jQuery:
$(".demo").click( function() {
window.location.href="link1.html";
});
I simply do
onClick="location.href='url or path here'"
What I would do is put a span inside the <a> tag, set the span to block, and add size to the span, or just apply the styling to the <a> tag. Definitely handle the positioning in the <a> tag style. Add an onclick event to the a where JavaScript will catch the event, then return false at the end of the JavaScript event to prevent default action of the href and bubbling of the click. This works in cases with or without JavaScript enabled, and any AJAX can be handled in the Javascript listener.
If you're using jQuery, you can use this as your listener and omit the onclick in the a tag.
$('#idofdiv').live("click", function(e) {
//add stuff here
e.preventDefault; //or use return false
});
this allows you to attach listeners to any changed elements as necessary.
A link with <div> tags:
<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
Something in the div
</div>
A link with <a> tags:
<a href="http://www.google.com">
<div>
Something in the div
</div>
</a>