How does one select the class jdgm-paginate__page unless jdgm-paginate__next-page is also applied to the element?
<a class="jdgm-paginate__page " data-page="2">2</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2"></a>
Use the :not() pseudo-class:
.jdgm-paginate__page:not(.jdgm-paginate__next-page):not(.jdgm-paginate__last-page) {
color: red;
}
a {
display: block;
}
<a class="jdgm-paginate__page " data-page="2">select</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2">don't select next</a>
<a class="jdgm-paginate__page jdgm-paginate__last-page" data-page="2">don't select last</a>
You can use the CSS :not pseudo class. For example:
.jdgm-paginate__page {
background: red;
}
This would make all elements with that class red regardless of additional classes.
.jdgm-paginate__page:not(.jdgm-paginate__next-page) {
background: red;
}
All elements with class .jdgm-paginate__page but no with .jdgm-paginate__next-page will be red
Maybe not the best solution, but you can also use attribute selector to select your specific element in case you don't know what are the other classes:
[class="jdgm-paginate__page"] {
color: red;
}
a {
display: block;
}
<a class="jdgm-paginate__page" data-page="2">select</a>
<a class="jdgm-paginate__page jdgm-paginate__next-page" data-page="2">don't select next</a>
<a class="jdgm-paginate__page jdgm-paginate__last-page" data-page="2">don't select last</a>
Related
is possible change color external links inside some class? I tried this:
.space-page-content a {
background: green;
color: white;
}
.space-page-content a[href^="http://"]:not([href*="mywebsite.com"]):after,
.space-page-content a[href^="https://"]:not([href*="mywebsite.com"]):after{
background: blue;
color: white;
}
<a style="space-page-content" href="http://www.mywebsite.com/page-1/" >internal</a><br>
<a style="space-page-content" href="http://www.google.com" >external</a><br>
<a style="space-page-content" href="http://www.mywebsite.com" >internal</a>
You have some errors in your CSS and HTML code,
in CSS .space-page-content defined as class, while in your HTML its something else.
also when your write like this .space-page-content a , this means that a is a child inside your parent .space-page-content. But in fact, your HTML says that this class is given to a, so you should say select 'a' that has class 'space-page-content' by this way a.space-page-content without any spaces between a and your class.
you want to change the background of your a , so no need to add :after.
a.space-page-content{
background: green;
color: white;
}
a.space-page-content[href^="http://"]:not([href*="mywebsite.com"]),
a.space-page-content[href^="https://"]:not([href*="mywebsite.com"]){
background: blue;
color: white;
}
<a class="space-page-content" href="http://www.mywebsite.com/page-1/" >internal</a><br>
<a class="space-page-content" href="http://www.google.com" >external</a><br>
<a class="space-page-content" href="http://www.mywebsite.com" >internal</a>
I have two JS components, Parent and Child, each one with its own scss stylesheet. Parent pass a modifier string to Child: one or two. Child renders this modifier in its main div as a BEM modifier class:
<div className="parent">
<div className="parent__title">This is parent</div>
<div className="child child--one">
<div className="child__title">Hello, this is one</div>
<ul className="child__list">
<li className="child__item">item1</li>
<li className="child__item">item2</li>
<li className="child__item">item3</li>
</ul>
</div>
<div className="child child--two">
<div className="child__title">Hello, this is two</div>
<ul className="child__list">
<li className="child__item">item1</li>
<li className="child__item">item2</li>
<li className="child__item">item3</li>
</ul>
</div>
</div>
I want Child to be unaware of Parent, so I can not modify its style in Child.scss: has to be done in Parent.scss.
This is Parent.scss:
.parent {
$root: &;
.child--one {
color: tomato;
&__item {
color: yellow;
}
}
.child--two {
color: blue;
}
}
Here the color: yellow; rule is not applied to .parent .child--one child__item, because it is targeting .parent .child--one__item.
The question is:
without modifying the HTML structure, how can I manage to target .parent .child--one .child__item in an elegant and simple way?
I would like, if possible, to maintain .child nested inside .parent in the stylesheet, to avoid polluting the stylesheets.
I think this is the most organized way to write what you propose.
.parent {
$root: &;
.child--one {
color: tomato;
.child {
&__item {
color: yellow;
}
}
}
.child--two {
color: blue;
}
}
Note that yellow only affects .child--one items and you got to repeat .child inside .child--one in order to reuse the BEM benefits according to your classes names. For example, if you later wanna style &__title or &__list
On the other hand, if you want to reuse .child__item regardless in which child it is, you can do this:
.parent {
$root: &;
.child {
&--one {
color: tomato;
}
&--two {
color: blue;
}
&__item {
color: yellow;
}
}
}
I have the follow code:
a {
color: black
}
a:not(.test1) {
color: red
}
a:not(.test1):not(.test2) {
color: green;
}
a.test {
color: blue
}
<a class='test'>
TEST
</a>
Why the result is green? I expected the result color will be blue
The selectors a:not(.test1):not(.test2) are more specific than just a.test.
If you inspect the element and view the declared styles you will notice that both styles are applicable but the rule with more specificity wins.
You can resolve this issue declaring another pseudo-class to account for a.test as well, e.g:
a:not(.test):not(.test1):not(.test2) {
color: green;
}
However, consider avoiding over-qualifying style rules by declaring them too specifically whenever possible.
:not() - CSS | MDN (Syntax reference)
Code Snippet Demonstration:
a {
color: black
}
a:not(.test1) {
color: red
}
a:not(.test):not(.test1):not(.test2) {
color: green;
}
a.test {
color: blue
}
<a class='test'>
TEST
</a>
<br>
<a class='test1'>
TEST 1
</a>
<br>
<a class='test2'>
TEST 2
</a>
<br>
<a>
TEST (no class)
</a>
I have this CSS:
.optionQuiz a:hover{
.Qtick{
background-color: green;
}
}
My HTML:
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>
My GOAL:
My Goal is when the user hovers the mouse over the <a> the span with class within the '<a>' to be highlighted.
MY Question:
Why this CSS didn't work? This is indeed good way but seems such thing have not been invented? Why? Should I use JavaScript? I don't want. I want it in CSS way.
Any kind of help is appreciated.
You don't need to use JavaScript. You can solve it with CSS only on a very simple way. See the following snippet:
.optionQuiz a:hover .Qtick {
background-color: green;
}
.optionQuiz a:hover .other1 {
background-color: blue;
}
.optionQuiz a:hover .other2 {
background-color: yellow;
}
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
<span class="other1">2</span>
<span class="other2">3</span>
</a>
</div>
With plain CSS you can't use nested selectors.
You can do it using a pre-processor like Sass, PostCSS, Less...
If you want to use just CSS you have to use something like this:
a:hover span.Qtick{
color:red;
}
<div class="optionQuiz">
<a href="#">
<span class="Qtick">1</span>
</a>
</div>
Not sure what
.Qtick{
background-color: green;
}
is for...
if you want to change the color
this will do:
.optionQuiz a:hover{
background-color: green;
}
if you want only the span to be highlighter use the following selector:
.optionQuiz a:hover >span.Qtick{
background-color: green;
}
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;
}