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
}
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 create a editor page that allows you to preview HTML files.
The problem is however that the editors styles are being inherited by the previewed HTML file e.g.:
<div class="header">
<div class="top">
Editing HTML page - page1.html
</div>
</div>
<div class="preview">
<div class="header">
<div class="top">
Page 1.html
</div>
</div>
</div>
I know that a work around would be to use an IFRAME, however I would prefer not to do this as I will be allowing drag and drop capabilities.
A CSS solution would be great, I did have the idea of using jquery to add a class to every item in the 'preview' area and using the following CSS for the editor page:
.header:not(.preview) {
background-color:#000;
}
.top:not(.preview) {
color: #fff;
}
This however seems a bit of a hacky solution and it would be great if there was a neater solution!
If you ultimately need to use not, you should invert your selectors:
:not(.preview) > .header { background-color:#000; }
:not(.preview) > .header .top { color: #fff; }
But it's better to design selectors in some other way
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>
I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.
how do i set the image of my link to change when it's active?
here's my code:
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>
CSS code:
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}
it doesn't seem to work.. :o i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. :o thanks!!
I am not seeing a style for visited? Only active and hover.
add
#gallery a:visited{}
style and see if that helps.
But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.
For example, if you use jQuery you can do something like this:
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});
where ActiveClass is a CSS class for styling the link appropriately.
EDIT based on comment below.
Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.
Hence, create two classes in CSS:
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}
of course you can use more meaningful names.
Then you can add a class to each of the links that you need to use in this scenario like this:
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.
Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});
So on click on the link, it removes lookB from any other link and applies it only to the clicked link.
Hope this helps a bit.
I believe the selector is:
#gallery a:focus {...}
This is (inevitably) applied variably across browsers, however.
Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.
Presumably this would be more reliably effected with jQuery, but it can be done with CSS.