link[type*="application/*+xml"]
I'm trying to match either rss+xml or atom+xml so I want to use a wildcard in that spot.
You can use a $ wildcard, which selects element whose attribute value ends with a specified value.
div{
width: 300px;
height: 300px;
}
link[type$="rss+xml"] + div{
background: green;
}
link[type$="atom+xml"] + div{
background: red;
}
<link type="application/rss+xml" />
<div></div>
Wildcard selector is used to select multiple elements simultaneously.
[attribute*="value"] {
// CSS property
}
It will look like this
[class*="str"] {
background: green;
color: white;
}
For Example:-
You can do like this.
<div class="first_str">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-strt">The third div element.</div>
<p class="mystr">Paragraph Text</p>
Now it will select all classes, named with str like:-
first_str, my-strt, mystr
Related
#id1
#id2
.
.
.
#id500
I want to add all these ID styles applicable under a div with a id "uniform"
Do I need to add #uniform to every id styles like
#uniform #id1, #uniform #id2 etc or any other shortcuts?
I need to make this happen without manual engagement.
You could use the CSS attribute^=value selector. It selects all matching classes, ID's, etc. that start with a certain string. Demo:
#uniform div[id^="id"] {
width: 100px;
height: 20px;
margin: 5px;
background: pink;
}
<div id="uniform">
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
<div id="id6"></div>
</div>
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
I understand that I can change another element's style when hovering on a different element like this:
.element-one:hover .element-two {
opacity: 0.8;
}
But how can I change the style of all the elements in the page except element-two when I hover on element-one?
You can use .element-one:hover :not(.element-two).
Here is an example:
.element-one:hover :not(.element-two) {
opacity: 0.8;
}
.element-one {
background: black;
margin: 10px;
}
.element-one div {
background: green;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
<div class="element-one">
<div class="element-two">
element-two
</div>
<div class="element-three">
element-three
</div>
<div class="element-four">
element-four
</div>
</div>
However - note that it will work only for elements inside element-one and not for all the elements in the page.
You can do this with body for example, but the problem there is that .element-two is probably also inside some other element that exists inside body, and in such case the .element-two will get the opacity from it's containing element.
Is there a way to split CSS literals on multiple lines ? I'm specifically interested in inlined images, for instance this rule is functional, but not easy to handle
.some-class {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAAN...etc...etc...gg==)
}
try this:
.some-class {
background-image:url('data:image/png;base64,iVBORw0KGgo\
AAAAN...etc...etc...gg==')
}
surround width quotes than backslash before the break
i splitted the first line here:
http://jsfiddle.net/Xadvz/543/
Doesn't seem to work on http-requests.
Otherwise use \.
Example:
.background-image {
width: 100px;
height: 100px;
display: block;
background-size: cover;
}
.first-child {
border: 1px solid black;
background-image: url('http://lorempixel.com/image_\
output/animals-q-c-100-100-3.jpg');
}
.last-child {
/*Splitting long literals*/
background-image: url('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulr\
SOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7');
<div class="background-image first-child">
<!-- Empty block -->
</div>
<div class="background-image last-child">
<!-- Empty block -->
</div>
In the following code I want to add styling specifically to the content of the last "B".
<div class="A">
<div>
I am <span class="B">foo</span>.
</div>
<div>
I like <span class="B">bars</span>.
</div>
<div>
Actually, call me <span class="B">FOOBAR</span>.
</div>
</div>
I have been trying
.B:last-of-type { color: red; }
and all classes "B" get selected because it uses the last occurence in it's immediate parents child elements. i.e. in it's direct siblings
Is there any way to only select the last occurence of "B" in the whole document?
You can do it like this
.A div:last-of-type .B { color: red; }
Fiddle Demo
or
.A div:last-child .B { color: red; }
Fiddle Demo
Try this JsFiddle Demo
.A div:last-child .B{ color: red; }
Found the answer! CSS3 get last element
I was doing a version of this but I found it ugly, I guess this is the only way. I will keep this Question open for a bit to see if anyone has any better suggestions.
.A span.B:last-child
{
background:#999;
}
.A div:last-child .B:last-child
{
background:orange;
}