Example of Selector grouping and Contextual Selector on CSS
Basically what you looking at is the following.
for
a. Selector grouping example
td, th, li { property: value; }
what the above is saying that you want to have the same value for the same property for
all td,th, and li
b. Contextual Selector example
table p { property: value; }
this one is saying that you want to set the value for <p>
tags that belongs to <table>
tags
so whenever you have a <p>
in a <table>
, then it will get effected.
CSS plus with multiple selectors
The adjacent sibling selector (+
) will only select the element directly following-- you want the general sibling combinator (~
). See below for an example:
.item1:hover ~ .item2 div,
.item1:hover ~ .item3 div {
background: red;
}
<div>
<div class="item1">
<div>Hover me please</div>
</div>
<div class="item2">
<div>Color me two please</div>
</div>
<div class="item3">
<div>Color me three please</div>
</div>
</div>
Correct terms and words for sections and parts of selectors
What is the correct term for the sections of CSS selectors that are separated by commas?
These are called complex selectors. The entire comma-separated list is known as a selector-list.
Within those sections, what is the term for the parts separated by combinators (spaces,
+
,>
, etc)?
These are known as compound selectors.
So, a selector-list is made up of one or more complex selectors separated by commas, and each complex selector is made up of two main parts: compound selectors, and combinators. It can also optionally contain pseudo-elements.
Compound selectors used to have the rather convoluted name "sequence of simple selectors". Worse still, complex selectors were just called "selectors". Needless to say, I recommend using the new terms as they are much more straightforward, much less cumbersome and completely unambiguous compared to their predecessors.
And since I'm here, here are the rest of the definitions...
A simple selector is one fundamental component of selectors. It is any one of the following:
- Universal selector (
*
), optionally with a namespace - Type selector (
a
,div
,span
,ul
,li
, etc), optionally with a namespace - Attribute selector (
[att]
,[att=val]
, etc), optionally with a namespace - Class selector (
.class
) - ID selector (
#id
) - Pseudo-class (
:pseudo-class
)
- Universal selector (
As answered above, a compound selector (formerly a "sequence of simple selectors") is a chain of simple selectors not separated by a combinator:
a:not([rel="external"]):hover
A combinator is another fundamental component of selectors. It is a symbol or token that separates two compound selectors, establishing in its place a relationship between the two elements represented by the two compound selectors. There are currently four combinators in use today:
Descendant combinator:
article p
Child combinator:
/*
* The extra spaces in between are whitespace,
* and are therefore insignificant.
*/
ul > liAdjacent sibling combinator:
header + section
General sibling combinator:
h2 ~ p
More combinators may be introduced in later specifications.
And a complex selector (formerly just "selector") is a complete string made up of compound selectors linked by combinators:
nav[role="main"] > ul:first-child > li
The subject of a complex selector is its last, or only, compound selector, representing the element that will be matched or styled. In the above example, the subject of the selector is
li
.The term selector has been generalized, so it may now refer to any of the following for the purposes of simplicity and brevity, and which one it's referring to at any given moment should be gleaned from context:
- Simple selector
- Compound selector
- Complex selector
- Selector-list (e.g. the "selector" component of a style rule)
Some personal notes:
The term "key selector" was coined by browser vendors for use with selector implementations, and is not an official term. It is often used to mean "subject of the selector" however, because implementations happen to use the subject of the selector as the key for the purposes of determining matches.
The term "pseudo-selector" was coined by authors to mix pseudo-classes and pseudo-elements, and is not an official, or indeed meaningful, term. Although you can find it in some early-stage W3C CSS2/3 drafts, that was probably a mistake. Please don't use this term, as it needlessly creates confusion by attempting to group two completely different concepts into a single umbrella term.
Pseudo-elements (
::pseudo-element
) are not simple selectors, and therefore cannot appear in places where only actual elements may be matched. However, they are still considered selectors for the purposes of CSS parsing, and as stated above currently can appear at the end of any complex selector in a list (i.e. at the end of the last, or only, compound selector of each complex selector).In CSS, a typical style rule (formerly "ruleset") consists of a selector and a declaration block.
Namespace prefixes are not selectors in their own right, but they may be applied to type selectors, universal selectors and attribute selectors to match components in a document that are (or are not) namespaced.
The specificity of a selector currently only refers to that of a single complex selector. When matching rules, any of the complex selectors in a list that match a given element will be considered for specificity calculations. If more than one complex selector matches an element, the most specific one will be used for calculations.
Specificity will be a more complicated issue with some level 4 selectors, such as
:is()
and the enhanced:not()
, and theof S
notation in the enhanced:nth-child()
pseudo.
CSS in ReactJS - media query and grouping selectors
The danerouslySetInnerHTML
is not a proper way to add CSS
to a react
application, there are many ways to add CSS
, for example I use PostCSS
preprocessor and for example Less
, Sass
, SCSS
, JSS
and many other ways are exist that you can use them, But if you just wanna run a test, make a style
tag and put these two CSS
es in it and absolutely your browser find it out and show you the results like plain HTML/CSS
.
Do like this below code:
<style>
@media (max-width: 600px) {
.main {
border-radius: 0px;
}
}
.un:active, .pass:active {
border: 2px solid rgba(0, 0, 0, 0.18) !important;
}
</style>
And put it in your code. Undoubtedly it works.
But with your more explain and editing the question, I understand that you need JSS
for your work, for more information visit this link
You can use in inside of your react
app with less complexity. you can prepare your CSS
es just like you want, as a JavaScript
object:
const viewPortSizes = {
height: "100vh",
width: "100vw",
};
And then use it in your JSX
tags.
Hope it helps you.
CSS Selector (A or B) and C ?
is there a better syntax?
No. CSS' or
operator (,
) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c
.
wildcard * in CSS for classes
What you need is called attribute selector. An example, using your html structure, is the following:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
In the place of div
you can add any element or remove it altogether, and in the place of class
you can add any attribute of the specified element.
[class^="tocolor-"]
— starts with "tocolor-".[class*=" tocolor-"]
— contains the substring "tocolor-" occurring directly after a space character.
Demo: http://jsfiddle.net/K3693/1/
More information on CSS attribute selectors, you can find here and here.
And from MDN Docs MDN Docs
How do I select an element based on the state of another element in the page with CSS?
The general answer to the canonical question
How do I select an element based on the state of another element in the page with CSS?
is that it depends on exactly three conditions:
- whether the state of these elements can be represented using simple selectors,
- whether a structural relationship can be expressed between these two elements using combinators to form a single complex selector, and
- whether the element that you want to target can be made the subject of the resulting complex selector.
While the current Selectors standard has some interesting and sometimes potentially powerful features, the way it is designed makes it extremely limited in area #2 (with #3 being a direct consequence). Some of these limited possibilities are enumerated in other answers, e.g. through the most basic use of child and sibling combinators, clever use of dynamic pseudo-classes (which actually relates to condition #1), or a combination of both.
The problem given in the question, on the other hand, cannot be solved using what is currently available in Selectors for this reason. Most of this boils down to the lack of either a parent selector and/or a previous sibling selector, both of which may seem like trivial features, but have certain implications that make them difficult to define or implement well. In summary:
Yes, the state of these elements can be represented using simple selectors:
div
and[data-status~=finished]
for the former, and.blink
and.spin
for the latter two.The first element can be represented by
section > div[data-status~=finished]
, and the two subject elements can be represented bysection + section > .blink
andsection + section > .spin
respectively. The problem is that it's not possible to write a complex selector incorporating all of these structures, because combinators are one-way, and there is no parent counterpart to the child combinator to join them at the firstsection
element.Assuming the answer to the first two questions is also "yes", each of
.blink
and.spin
can be made the subject of its own complex selector. (But more on that in the next section.)
If you've been directed to this question, chances are the problem you're trying to solve, like the one given above, cannot be solved with Selectors due to these limitations.
The upcoming standard boasts some new features that will greatly enrich selector syntax and potentially open it (and CSS) up to a host of new possibilities, including a possible solution to the example problem. All of these things will be covered in the following sections, but first I'll explain what each condition means and how it relates to the given example:
Element states, and structural relationships between elements
The defining characteristic of a selector is that it represents a certain structure of one or more elements in the document tree. This isn't just something I made up — you can actually find this description in the informative overview of the Selectors standard:
A Selector represents a structure. This structure can be used as a condition (e.g. in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure.
Selectors may range from simple element names to rich contextual representations.
Each element is represented by a sequence of one or more simple selectors. This sequence is known as a compound selector (I'm using terminology from Selectors 4 here as it is much clearer than what is used in Selectors 3 — see this answer for a non-exhaustive list of terms).
Each simple selector represents a certain state of an element. There are simple selectors for matching the type (or tag name) of an element, a class name, an ID, or an arbitrary attribute. There are also pseudo-classes, which represent abstractions and other special states not directly represented within the document tree, such as the order and position of an element in its hierarchy (:nth-child()
, :nth-of-type()
), user interactions (:hover
, :active
, :focus
, :checked
), the visitedness of a hyperlink (:link
, :visited
), and much more.
In the given example, the div
element with a data-status
attribute whose space-delimited value contains finished
can be represented with a type selector and an attribute selector:
div[data-status~=finished]
If you want the selector to apply only when the pointer is over this element, simply throw in a :hover
pseudo-class:
div[data-status~=finished]:hover
Compound selectors are linked via combinators to form complex selectors. These combinators, the >
, +
and ~
symbols that you may be familiar with, express a relationship between the elements represented by each compound selector. With these two tools alone, you're already able to create some very interesting results as shown in the other answers here. I explain these basics in even further depth in this answer.
In the given example, the following structural relationships can be established:
The first
section
element is the parent ofdiv[data-status~=finished]
. This is represented using the child combinator>
:section > div[data-status~=finished]
The second
section
immediately follows the first one as its sibling. This is represented using the adjacent sibling combinator+
:section + section
Additionally, the second
section
is the parent of both.blink
and.spin
. This can be represented using two selectors, one for each child:section + section > .blink,
section + section > .spinWhy are two selectors required? In this case it's mainly because there is currently no syntax for subgrouping two compound selectors into one, so you will have to represent each child element separately. The upcoming Selectors 4 standard introduces a
:matches()
pseudo-class that will provide this very subgrouping functionality:section + section > :matches(.blink, .spin)
Now, since every compound selector in a complex selector represents one element, and thus section + section
represents two elements that are siblings, section > div
represents a parent and a child, and section + section > div
represents a child of a next-sibling, you would think that a parent combinator and a previous-sibling combinator are quite redundant. So why do we commonly get these questions:
- Is there a CSS parent selector?
- Is there a "previous sibling" CSS selector?
And, more importantly, why is the answer to both of these questions no? The reason is addressed in the next point:
Subject of a selector
The subject of a selector is always represented by the rightmost compound selector. For example, the selector section + section > div
represents three elements, of which div
is the subject. You might say that the div
is selected, or targeted, as in the question, but if you've ever wondered if there was a proper term, it's known as the subject of the selector.
In a CSS rule, styles are applied to the element represented by the subject of the selector. Any child boxes and pseudo-element boxes inherit the styles from this element where appropriate. (The exception is if the subject of the selector includes a pseudo-element, in which case the styles are applied directly to the pseudo-element only.)
Taking the selectors from the previous section, we have the following:
- The subject of
section > div[data-status~=finished]
isdiv[data-status~=finished]
. - The subject of
section + section
is the secondsection
selector. - The subjects of
section + section > .blink, section + section > .spin
are.blink
and.spin
respectively. - Using
:matches()
, the subject ofsection + section > :matches(.blink, .spin)
is:matches(.blink, .spin)
.
It might seem therefore that we do need a parent selector or a previous-sibling selector. But remember that selectors can already represent complex structures. Instead of simply adding new combinators that work opposite of existing ones, it makes sense to seek out a more flexible solution, and that is exactly what the CSSWG has been doing.
Which brings us to the following from the original question:
Is there a CSS selector that would let me specify which elements should get selected based on target element state?
The answer to this is no, and will remain no. However, in the earlier drafts of Selectors 4 (from the FPWD up to the latest working draft from May 2013), there was a proposal for a new feature that would let you pick any of the compound selectors other than the rightmost one, and designate that as the subject of the selector.
A potential solution
However, the subject indicator was recently removed in favor of the :has()
pseudo-class (that was in turn adopted from jQuery). I speculate on a likely reason here:
The reason
:has()
is more versatile is because, with the subject selector, it was never made clear in any draft if a single complex selector could have more than one subject selector (since a single complex selector can only ever have one subject) and/or if functional pseudo-classes such as:matches()
accepted the subject selector. But because a pseudo-class is a simple selector, you know that:has()
can be accepted anywhere a pseudo-class is accepted.
So while you cannot change the subject of a selector, :has()
will completely write off the need to do so, due to its pseudo-class nature. And the best part is that it does this — and then some — all without fundamentally changing selector syntax.
In fact, the example problem can be solved using Selectors 4's :has()
:
/* Combined with the :matches() example from above */
section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)
Notice the use of a child combinator: this scopes the relative selector argument to just children of the first section
. Yes, this is the elusive "parent selector" that Web developers the world over have been wanting for years.
And since :has()
comes from jQuery, you can use it today, although :matches()
doesn't exist yet so you'll have to replace that with a call to .filter()
in the meantime:
$('section:has(> div[data-status~=finished]) + section > div') .filter('.blink, .spin') .css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><section> <div>Element 1</div> <div data-status="finished">Element 2</div> <div>Element 3</div></section><section> <div>Element 4</div> <div class="blink">Element 5</div> <div>Element 4</div> <div>Element 4</div> <div class="spin">Element 4</div> ...</section>
CSS Performance between class and attribute selectors
There is no performance issue. Both act same. But there is difference in specificity of the css with class versus Elements.
Specificity - Specificity determines, which CSS rule is applied by browsers.
If two selectors apply to the same element, the one with higher specificity wins.
But specificity has hierarchy.
- Inline styles (Presence of style in document).
An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. - IDs (# of ID selectors)
ID is an identifier for your page elements, such as #div. - Classes, attributes and pseudo-classes (# of class selectors).
This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc. - Elements and pseudo-elements (# of Element (type) selectors).
Including for instance :before and :after.
Source: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Hence div.test {}
is more specific.
Related Topics
Center Vertically the Content of a Div
Resizing Google Map According to Browser Resizing
CSS Element Child VS Child with Text Node
Should the Cursor Property Be Set in a Rule with or Without the :Hover Pseudo-Class
Css- Multiple Background Image
How to Change Primefaces Submenu Default Icons
Use Images in CSS Files with Reactjs
Pseudo Element Not Aligning at Top Left Corner
How Element Selector Is More Specific Than Id Selector
Bootstrap V4 Grid Sizes/Sass List
Is There a Specific Order for CSS Properties
MVC Cannot Display Image Using Background-Url in CSS - Uses Bundling
Web-Kit and Sub-Pixel Values, Workaround
How to Listen to the End of a Bootstrap Animation