Subj. I've got a module for Joomla (don't blame me for using joomla, it's not me, i'm just helping my friend) with advertisment. The problem is that i can't get source codes for any modules, so I have to fix most of the problems via CSS (display:none method mostly).
<div style="text-align: right;">
<a style="text-decoration:none; color: #c0c0c0; font-family: arial,helvetica,sans-serif; font-size: 5pt; " target="_blank" href="http://joomline.ru/">ADVERTISMENT HERE</a>
</div>
If only div was declared, I would simply make it invisible using the display:none method...
Looking forward to help !
EDIT:
<div class="content">
<div id="jlvkgroup41016340" style="background: none repeat scroll 0% 0% transparent; height: 301px; width: 270px;">
...
</div>
<script type="text/javascript"> ... </script>
<div style="text-align: right;">
<a style="text-decoration:none; color: #c0c0c0; font-family: arial,helvetica,sans-serif; font-size: 5pt; " target="_blank" href="ADVERT LINK">TEXT ADVERT</a>
</div>
</div>
Assuming you're trying to hide the link (with that specific href):
a[href^="http://joomline.ru"] {
display: none;
}
JS Fiddle demo.
Based on the newly-added HTML, you can target the specific a element using sibling-combinators:
#jlvkgroup41016340 + script + div a {
display: none;
}
JS Fiddle demo.
This targets the a elements that are a descendant of a div element that's the immediately-adjacent sibling of a script element that is itself the adjacent sibling of the element with the id of jlvkgroup41016340.
Or:
#jlvkgroup41016340 ~ div a {
display: none;
}
JS Fiddle demo.
This targets the a descendants of a div which is the later-sibling of the element of id="jlvkgroup41016340".
References:
General-sibling (~) combinator.
Adjacent-sibling (+) combinator.
Related
Why does the css :hover effect not work?
http://jsfiddle.net/t7on1k15/
body,html
{
font-family: courier;
height:100%;
min-width: 100%;
margin:0;
padding: 0;
}
#idDivBodyWrapper
{
margin:0;
padding:0;
height: 100%;
width: 100%;
background: lightgray;
}
#four:hover
{
color:black;
}
The HTML
<div id="idDivBodyWrapper" style="vertical-align:middle;">
<div style="position:absolute;display:block;float:left;left:0;Top:0"><button class="btn btn-default btn-lg" style="opacity:1;background:transparent;font-family:courier;font-weight:bold;" onclick="location.href='http://vqplan.com';"><i style="color:white;opacity:1;" class="fa fa-th fa-fw fa-5x"></i><br><span style="opacity:1;color:white">home</span></button></div>
<table style="width:100%;height:100%;background:black;clear:both;vertical-align:middle;text-align:center;"><tr><td>
<h1 id="four" style="font-size:10vh;color:white;">Code that lasts.<br><br><i id="one" class="fa fa-terminal fa-3x fa-fw" style="color:white;"></i></h1>
</td></tr></table>
</div><!--end idDivBodyWrapper-->
Here is one that does work:
http://jsfiddle.net/tuxdukz4/
CSS - CASCADING style sheets. You've got style="color:white" inside your h1#four element. That color:white is at a higher precedence level than your external style sheet rule, so color: white overrides the :hover style.
If you mod your fiddle and put color:purple into the h1's style= attribute, you'll get the exact same behavior: the hover won't work.
Because of CSS Specificity. I truly recommend you to read about it: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
You have an element-level style color: white that overrides the hover effect.
Check this for a working one: http://jsfiddle.net/t7on1k15/1/
fiddle: http://jsfiddle.net/t7on1k15/2/
change the <h1 id="four" style="font-size:10vh;color:white;"> html to this:
<h1 id="four">Code that lasts.<br><br></h1>
and then add this css:
#four {
font-size:10vh;color:white;
}
your inline style has highest precedence over other css code.
I believe that putting the style inline ("style="font-size:10vh;color:white;") takes precedence over css. Inline style has higher priority. You actually couldn't style #four without hover in css if you use an inline style.
<article class="tweet-inner">
<div class="text-wrapper">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</div>
</article>
I have the following repeating html structure.
As of now, I want to provide alternate rows with different background. The element which I want to color is class=text
I do the following in my css -
.tweet-inner .tweet .text-wrapper .text:nth-child(even) {
background-color: #FF0000;
}
This does not work, I also tried -
.text:nth-child(even) {
background-color: #FF0000;
}
This is what works -
article.text:nth-child(even) {
background-color: #FF0000;
}
But I want the .text to be alternately colored, not the entire article.
This also does not work.
The fiddle is http://jsfiddle.net/LKqvz/. Please let me know.
It should be:
article:nth-child(even) .text{
...
}
Because you have multiple article elements with a single .text DIV (your attempts select the nth .text child from article)
Try this
article:nth-child(even) .text {
background-color: red;
}
Js Fiddle
try this:
article:nth-child(even) .tweet .text {
background-color: #FF0000;
}
Following is the html structure, that is repeating inside my html page.
<article class="tweet-inner">
<div class="tweet">
<div class="text">
<p>Coming down! Time for Croation BBQ </p>
</div>
<p class="last">
<span class="pull-right">
<small> Hello this is first text </small>
<small> Hello this is second text </small>
</span>
</p>
</div>
</article>
The above is one unit of repeating structure inside my HTML.
The functionality I want is, when you hover over the tweet text, .tweet .text p then the content of .last should show.
I did the following :
.last{
display: none;
}
.tweet .text p:hover .last{
display: block;
}
Two doubts :
You should be able to see the .last of only the element upon which you have hovered.
The above is not working, the fiddle is http://jsfiddle.net/EymLT/
Thanks!
Your CSS selector is incorrect. Firstly .last is not a child of .text, and the p element cannot be hovered because it is invisble. Try this:
.tweet:hover .last{
display : block;
}
Updated fiddle
Replace your last style with this:
.tweet .text:hover + .last{
display : block;
}
You can use ~ in CSS
DEMO http://jsfiddle.net/kevinPHPkevin/EymLT/4/
.last{
display:none;
}
.text:hover ~ .last{
display : block;
}
If you replace my ~ with > it will be more browser compatable. The > ensures only the child is seleted so you can use a parent div as the hover target.
.last{
display:none;
}
.tweet:hover > .last{
display : block;
}
I need to set it with CSS, not jquery.
The selector is for
all labels which do not have a sibling that is a checkbox or radio component.
a sample is:
<span>
<input id="item" type="checkbox">
<label for="item">Data</label>
</span>
This is because i have CSS which sets label to 12px, BUT it affects asp:checkboxes and asp:radio..., but i do not want them to be affected.
There isn't a CSS selector for an element that doesn't have a sibling of a certain kind.
But if you can guarantee that your structure is always an input followed by a label, then you could use the next-sibling combinator with :not() like so to match the label:
input:not([type="checkbox"]):not([type="radio"]) + label
Otherwise you're going to have to add classes to those labels, or use jQuery.
Try adjacent sibling selector:
input[type='text'] + label { // your styles }
You need to apply it to all predecessors you need namely. But there are not many possibilities to use label for besides checkbox and radios you don't want ;)
DEMO
You can select elements based on what kinds of siblings they have, IF the siblings precede your target elements. You can do however much type/selector checking you want on preceding siblings of your target.
You can kind of go backwards using nth-last-of-type and nth-last-child, but you can't do any selector checking on elements which follow your target, and the only kind of type checking you can do on following elements is counting how many there are of the same type.
So in your case you could use:
label {
/* your styling here */
}
input[type="checkbox"] + label, input[type="radio"] + label {
/* remove the styling for labels preceded by a checkbox or radio button */
}
Use ~ instead of + if you expect other elements between your inputs and labels.
Depending on what other elements might be inside the spans that you're working with, any of the 'nth' pseudoclasses may be useful to you.
This would also work for your example, if all you care about is that the labels don't have a preceding sibling:
label:first-child {
/* awesome styles */
}
I submitted an answer to a question that I feel is extremely valuable and along the lines to what you're asking for in this question. Here is the permalink to that question/answer.
https://stackoverflow.com/a/43132408/6167697
The key thing that is missing that may not work for your case is I propose keeping the inputs a child only to what they need to be so that other content can be selector'd using generic sibling selectors. Hypothetically you could still keep them in the span, and then use the labels in various elements inside the span, and that would still allow you treat those labels separate from any others I would think. I'll copy in a code snippet for a working example that demonstrates label elements that are not siblings to their inputs that can still be styled.
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
padding: 5% 0;
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
That has the added benefit of being pure CSS too! And as per the other post, here's the JSFIDDLE so you can play around with it yourselves.
I have something along the lines of this
<div class="menu" style="background-color: transparent;">
<div class="button">
<div class="divider" style="background-color: transparent;"></div>
<a id="apple" class="unselect select" href="/apple">
<span class="apple1">Apple</span>
</a>
</div>
<div class="button">
<div class="divider"></div>
<a id="orange" class="unselect" href="/orange">
<span class="orange1">Orange</span>
</a>
</div>
....
this gives me the first divider
css=div.menu div.button div.divider
I am trying to access the 2nd divider. I have the need to access the buttons as well. I tried reading through the the nth child stuff and noticed that it is not compatible with IE.
Is there a CSS selector to locate the 2nd/3rd child or descendant (of a given class/id) under an element (with a given class/id)?
I am using xPaths now
//div[#class='menu']/descendant::div[contains(#class,'divider')][2]
it works but I want to migrate this to CSS.
The adjacent sibling selector + is able to do that and is compatible with IE7+
Fiddle demonstrating its use with 4 buttons: http://jsfiddle.net/AgNwu/
(no need for "div" if you rely already on id/class everywhere. If you call something "button", expect it to be a link, an input[type="submit|image|button|reset"] or button element ;) )
CSS
.menu > .button {
border: 1px solid darkblue;
padding: 10px;
margin: 5px 0;
}
.menu > .button + .button .divider {
background: Tan;
}
.menu > .button + .button .divider:after{
content: " (2nd or more)";
}
.menu > .button + .button + .button .divider {
background: yellow;
}
.menu > .button + .button + .button .divider:after{
content: " (3rd or more)";
}
edit: adjacent sibling, I thought this was sibling vs. general sibling
You can replace + by ~ (general sibling) if you have other type of nodes in-between your .button nodes/elements. This'd be the equivalent of :nth-of-type that would still work in IE7+
You can write like this:
div.menu div.button + div.button div.divider{
color:red;
}