I have an anchor that links to an element using data-attributes for which need special styles when targeted.
My logic
span[data-anchor="my-data"]:target {
/* styles */
}
anchor
<span data-anchor="my-data">My Data</span>
I'm using Shortcodes Ultimate (WP)
https://gndev.info/shortcodes-ultimate/
:target works on the currently active anchor
it doesn't really need a selector
try something like this:
html:
anchor
<span id="my-data">My Data</span>
css:
:target {
background-color: red;
}
see a working example here-
https://jsfiddle.net/0fkh8n09/
Related
I know it is strange, but how can I select all the IMGs in a document which don't have a source (I am talking about the CSS selector)
That is, I want to select
<IMG>
but not
<IMG src="/my_file.png">
The answer is
img:not([src]) {
/* style here */
}
You need to use :not selector
img:not([src]) {
/* style here */
}
I am trying to change the cursor on hover when mouse cursor hovers over a table. The view here is written in ruby-rails. I tried simply adding
.custom > table:hover·
{
cursor: wait;
}
adding the above to custom.css.scss
And then I added the below code to my view
<table class="nav nav-tabs custom">
This does not seem to work.
I know the css code has to be within some block but I am not sure of the exact way of going about it especially within ruby on rails. Any way to correct what I am doing wrong?
EDIT:
Thanks for the suggestions.
I tried this
table.custom:hover{
cursor:wait;
}
although this works in the table header it does not work for the part where the data within the table is being rendered:
<table style="display:none" class="nav nav-tabs custom">
<%= render ClassName.new, :index => 'N_TYPE' %>
</table>
And rendering columns similar to this
<td><%= label_tag :p_type, p_type.p_type %></td>
.custom > table:hover·
{
cursor: wait;
}
What your CSS does is it looks for a children table inside a selector with class .custom. So it wont work for your HTML.
The proper way is
table.custom:hover{
cursor:wait;
}
which looks for a table with the class name .custom and applies CSS
Fiddle
In your style you have made use of the child combinator ">". Child combinator is used to apply CSS to child elements of the selected element.
For eg.
HTML:
<ul>
<li>First</li>
<li>Second</li>
</ul>
CSS:
ul > li {
width: 100px;
}
will apply style on both "li" as they both are child of "ul".
In your case you need to apply css on direct element. For that purpose you don't need to use child combinator.
Also you are making of CSS Pseudo classes. This classes can be directly apply to element.
Eg.
#mycustomid:hover
.mycustomclass:hover
elementname:hover
Check attached jsfiddle code.
http://jsfiddle.net/zgjx7ymr/
There is no child table elements under the class custom. Try like this.
table.custom:hover
{
cursor:wait;
}
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
This seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.
Is there some kind of "not" CSS selector?
For example when I write the following line in my CSS, all input fields inside an tag with class classname will have a red background.
.classname input {
background: red;
}
How do I select all input fields that are OUTSIDE of a tag with class classname?
With current browser CSS support, you can't.
Newer browsers now support it- see Sam's answer for more info.
(See other answers for the alternatives in CSS.)
If doing it in JavaScript/jQuery is acceptable, you can do:
$j(':not(.classname)>input').css({background:'red'});
Mozilla supports negation pseudo-class:
:not(.classname) input {background: red;}
See also: http://developer.mozilla.org/en/Mozilla_CSS_support_chart
Note that the negation pseudo class is in the Selectors Level 3 Recommendation and works in recent versions of Firefox, Chrome and Safari (at least). Sample code below.
<html>
<head>
<title>Negation pseudo class</title>
<style type="text/css">
div {
border: 1px solid green;
height: 10px;
}
div:not(#foo) {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="foo"></div>
<div id="bar"></div>
<div id="foobar"></div>
</body>
</html>
Wouldn't you do that by setting the 'global' background to red, then using the classname to alter the others?
input { background: red; }
.classname input { background: white; }
I would do this
input { /* styles outside of .classname */ }
.classname input { /* styles inside of .classname, overriding above */ }
There is no way to select the parent of matched elements with CSS. You would have to use JavaScript to select them.
From your question I assume you have markup that looks more or less like this:
<form class="formclassname">
<div class="classname">
<input /> <!-- Your rule matches this -->
<input /> <!-- Your rule matches this -->
</div>
<input /> <!-- You want to select this? -->
<input /> <!-- You want to select this? -->
</form>
One option is to add a class to a higher element, say the <form>, and write a rule to style all of the inputs of the form. I.E:
.formclassname input {
/* Some properties here... */
}
Or
.formclassname > input {
/* Some properties here... */
}
If you want to select them based on the fact that they are not inside of an element with a specific class, you're out of luck without the use of JavaScript.
I think the closest you can get is to only affect direct descendants with a declaration
This code for example will only affect input fields directly under divs with class "maincontent"
div.maincontent > input {
// do something
}
Inputs are a bit annoying because, unlike most other html elements, there isn't necessarily a way of resetting all the css properties back to their default value.
If the styling is non-critical (ie a nice to have but doesn't affect functionality) I would use jQuery to get an array of all the inputs, check their parents, and then only carry out the styling on those outside that div. Something like:
$('input').each(function() {
if($(this).closest('.classname') == false)
{
// apply css styles
}
});
(By the way, I'm no jQuery expert, so there might be some errors in the above, but in principle something like this should work)