Is it possible to select the element First but not Second?
<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>
I intend to select <code> when its child of <p> but without content (except whitespace) in <p>
I want to do it without JS, if it is not possible that would also be an answer if its explained
You can do this using a filter in jQuery:
$('p').filter(function() {
var nodetoCheck = $(this).contents()[0];
if ($(this).contents()[0].nodeValue.trim() === '') {
nodetoCheck = $(this).contents()[1];
}
if (nodetoCheck.nodeType === 1) {
return true;
}
}).addClass('selected');
JSfiddle Example: https://jsfiddle.net/jennifergoncalves/eywk7b53/1/
p:first-child > code {
color:#fff;
background:tomato;
}
<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>
Also included fiddle code if you do it with jquery
Working fiddle
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last month.
So I am using a rust markdown parser and it renders header_ids by placing an <a> tag with an id inside the <h> tags.
So I am getting something like:
<h3>
"TEXT"
</h3>
So I want to color the text thats in the <h3> tag by target it by the id thats on the <a> tag. So not target the directly because then I would color all the <h3> tags.
I tried some different css selectors and what not to target it, but nothing worked. Not even sure if thats possible.
you can try something like that:
h3:has(> #test) {
color: red;
}
<h3>text</h3>
<h3>text <a id="test" href="#">text</a> text</h3>
Although you can achieve that with some CSS it's not the correct way to do it.
IDs should only be used for specific cases or not at all in my opinion. It's fine to use an ID for some Javascript selectors due to performance but for CSS seems like and over kill.
If you want to have the H3 having one color and the A tags inside it just do:
h3 {
color: black;
}
h3 > a {
color: red;
}
<h3>
This is a title
</h3>
<h3>
This is a title with some anchor
</h3>
If you want only that particular A tag of that H3 to change color, then use a class instead like so:
h3 {
color: black;
}
h3 > .anchor {
color: red;
}
<h3>
This is a title
</h3>
<h3>
This is a title with some anchor
</h3>
If you are using an ID in order to create an anchor link to that ID that's fine, but you should not use CSS selectors to attribute CSS Styles to something as trivial as an A tag.
If JavaScript isn't out of scope, you can query regularly for h3 a and then use the parentElement to assign the styling:
const linksWithH3 = document.querySelectorAll("h3 a");
for(let index = 0; index < linksWithH3.length; index++) {
const parentElement = linksWithH3[index].parentElement;
parentElement.style.color = "red";
}
<h3>
"TEXT"
</h3>
Or you can introduce a class:
const linksWithH3 = document.querySelectorAll("h3 a");
for(let index = 0; index < linksWithH3.length; index++) {
const parentElement = linksWithH3[index].parentElement;
parentElement.classList.add("h3-with-a");
}
.h3-with-a {
color: red;
}
<h3>
"TEXT"
</h3>
How can I select all a elements inside a p element that have a specific class name?
<div>
<p class="myClass">
This is
<div>
random
</div>
</p>
</div>
Remove the div inside the p tag:
<div>
<p class="myClass">
random
</p>
</div>
Then if you want to select all the a tags inside a p tag which you gave a class. You can do the following:
.myClass a {
}
May be you aren't able to target anchor tag(s) due to that div. Do you need that div before the anchor tag? Please refer to the code snippet below:
.myClass a {
color: green;
}
<div>
<p class="myClass">
This is
random
</p>
</div>
div *[href]
{
// css rules...
}
<div>
<p class="myClass"> This is
<div>
random
</div>
</p>
</div>
you can give a specific class name to a and call it like:
<a class="myA's" href="#">random</a>
CSS
a.myA's{
#do something
}
And in your case it should be:
.myClass > a{
#doSmthg
}
<p> can only contain inline elements,See here.
so,remove div inside p:
p.myClass a {
color: red;
}
<div>
<p class="myClass">
This is<br>
random
</p>
</div>
You need to change the <p> to <div> then use this
.myClass > div a { ... }`
or remove <div> inside the <p> and try this
p.myClass a { ... }
I would like to use CSS to target an element that is a "cousin" of a specific element — in other words, where they are both descendants of sibling elements.
I can target an element based on its "uncle" or a sibling of an ancestor, like this:
HTML:
<div>
<h2 data-section="name">Name</h2>
<p class="hint">Full name of the employee</p>
<p>
<span class="value1">Joe Tester</span>
</p>
</div>
<div>
<h2 data-section="details">Occupation</h2>
<p class="hint">Job role or title</p>
<p>
<span class="value1">Software Engineer</span>
</p>
</div>
CSS:
/*
* element that
* has a class of value1
* and is a descendent of a p
* that is next to an h2
* with attribute data-section=name
*/
h2[data-section="name"]~p .value1 {
color: #F92759;
}
Result:
But what if the data-section="name" element is wrapped in another element? Is it still possible to make the following HTML the same as the image above?
<div>
<div>
<h2 data-section="name">Name</h2>
</div>
<p class="hint">Full name of the employee</p>
<p>
<span class="value2">Joe Tester</span>
</p>
</div>
The practical application: Targeting a node in a page (inside body tag) that has a particular meta element.
Example JSFiddle here: http://jsfiddle.net/nchaves/tefpY/
There isn't a css-only solution for this. You can, however, accomplish this using jQuery:
<script>
$("[data-section='name']").parent().parent().addClass('myclass');
</script>
<style>
.myclass .value2 { color: #F92759; }
</style>
JS Fiddle here: http://jsfiddle.net/tefpY/1/
I have a series of div and I would like to select all p tags with enable class except the last inside each div in order to apply a specific style in css. The content are dynamically generated and may vary depending on the user.
In the example below, I would like to apply this style to the first two p inside the first div and none inside the other. I'm sure it's pretty easy but I don't find any solution to solve it.
<div>
<p class="enable"></p>
<p class="enable"></p>
<p class="enable"></p>
<p class="disable"></p>
</div>
<div>
<p class="enable"></p>
<p class="disable"></p>
<p class="disable"></p>
<p class="disable"></p>
</div>
Thanks for your help.
If the p elements are confined to four per div you can use the nth-child pseudo selector.
p.enable:nth-child(-n+2)
{
background: #0f0;
}
p.disable
{
background: #eee;
}
http://jsfiddle.net/Kyle_Sevenoaks/vw4wQ/
I have a Javascript solution for you:
var divs = document.getElementsByTagName("div"), paras, i, j;
for(i = 0; i < divs.length; i++) {
paras = divs[i].getElementsByTagName("p");
for(j = 0; j < paras.length-1; j++) {
if(paras[j+1].className === "disable")
break;
// apply your custom code here
paras[j].style.background = "#FF0000";
}
}
Check this solution in this jsFiddle
I'm trying to make a button that changes two things with CSS. First, it will make text appear, and second it will make an image on top of the text disappear. I've tried a number of things, but I just can't get it to work. Any help would be greatly appreciated.
the Css is
p {
color:#591865;
text-align:center;
opacity:0;
}
p:target {
color:# a1a100;
opacity:1;
-webkit-transition: opacity 1s linear;
}
#image {
opacity: 1;
background-image:url(images/01.jpg);
height: 786px;
width:1024;
}
#image:target {
opacity:0;
}
and the html is
<nav>
One
Two
Three
Four
</nav>
<div id="image"><img src="images/01.jpg"/></div>
<div>
<p id="one"><img src="graphics/filler.png" width="281" height="128" onClick="javascript:playVideo1();"/></p>
<p id="two"><video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video></p>
<p id="three">Number Three</p>
<p id="four">Number Four</p>
</div>
</div>
thanks for any input
This isn't possible, as it's currently written. To affect two disparate elements in this manner, would require JavaScript.
However, if you're able to reorder your HTML (and are willing to have support from only the more modern browsers), then it can be implemented with the following HTML:
<nav>
One
Two
Three
Four
</nav>
<div>
<p id="one">
<img src="graphics/filler.png" width="281" height="128" onclick="javascript:playVideo1();"/>
</p>
<p id="two">
<video src="images/01.m4v" poster="images/01.jpg" autoplay controls></video>
</p>
<p id="three">
Number Three
</p>
<p id="four">
Number Four
</p>
<div id="image">
<img src="images/01.jpg"/>
</div>
</div>
And the additional CSS selector:
p:target ~ #image {
opacity:0;
}
JS Fiddle demo.
If JavaScript's an option, then the following works:
var links = document.querySelectorAll('nav > a'),
image = document.getElementById('image');
for (var i=0,len=links.length; i<len; i++){
links[i].onclick = function(e){
image.style.opacity = '0';
};
}
JS Fiddle demo.
References:
CSS:
E ~ F, the general sibling combinator.
JavaScript:
getElementById().
querySelectorAll().
element.style.
You cant make two ids in a single href because a # href makes the browser focus on the object your linking to so if you point 2 objects the browser cant focus them both...
for example: imagine you put two hrefs to input text, both will be focused? when you type will it enter the same on both?
you can use javascript:
One
<script type="text/javascript">
function toggleVisible( textId, imageId ) {
$( "#" + textId ).show().
$( "#" + imageId ).hide();
}
</script>
of course you'll have to include jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
I was trying to accomplish a similar thing, i.e. using css only to show\hide items using anchors, and the target selector...
I don't have the time to create an example specific to this question, but i'm sure you can figure it out... ;)
here's the fiddle...
(http://jsfiddle.net/pB72f/)
Something like this? (I am using jQuery here but the same idea can be easily applied to regular javascript)
One
<script type="text/javascript">
function toggleVisible( textId, imageId ) {
$( "#" + textId ).show(); //It should be semicolon
$( "#" + imageId ).hide();
}
</script>
You can't put 2 id's into the url, just as david Thomas has said, but there is a complex css solution which requires no javascript. In your proposal you have four a tags, therefore you have 4 individual states that the page can be in. wrap all 4 of your p tags, inside the parent div in 4 nested span tags and id each span tag with an id for each individual state
<nav>
One
Two
Three
Four
</nav>
<span id="oneimage1">
<span id="twoimage1">
<span id="oneimage2">
<span id="twoimage2">
<div id="image1"><img src="images/01.jpg"/></div>
<div id="image2"><img src="images/01.jpg"/></div>
<div>
<p id="one">Number One</p>
<p id="two">Number ~Two</p>
</div>
</span>
</span>
</span>
</span>
Css then would look something like this
span#oneimage1:target #image1 {Properties: values; go here }
span#oneimage1:target #one {Properties: values; go here }
span#oneimage2:target #image2 {Properties: values; go here }
span#oneimage2:target #one {Properties: values; go here }
span#twoimage1:target #image1 {Properties: values; go here }
span#twoimage1:target #two {Properties: values; go here }
span#twoimage2:target #image2 {Properties: values; go here }
span#twoimage2:target #two {Properties: values; go here }
This works because you are targeting a parent of all of the elements you wish to
control from the url. Because you need four id's and you can only place one id
on a single element, you therefore need to nest 4 span elements wrapped around,
the elements whose css you wish to control.
All the Best. TJE