Is there a way to group selectors? [duplicate] - css

This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 6 years ago.
I'm trying to address all the div, table, ul, dl, etc. children of a selector using LESS.
I would love to write something like this.
.myclass {
...
&.otherClass > (div, ul, dl, table) {
// define some rules...
}
}
I would expect the following output.
.myclass.otherClass > div,
.myclass.otherClass > ul,
.myclass.otherClass > dl,
.myclass.otherClass > table {
// rules
}
But the parenthesis seems like not supported, as it compiles as is, resulting an invalid CSS of course.
Is there any syntax or other way to have such a shortcut in definitions?


Your solution:
.myclass {
...
&.otherClass {
> div, > ul, > dl, > table {
// define some rules...
}
}
}
As for your comment, removing the > selector after the first selector, will produce a different result:
This example
div {
> span, p, a {
border:1px solid #333;
}
}
compiles into
div > span, div p, div a {
border: 1px solid #333;
}
while this example
div {
> span, > p, > a {
border:1px solid #333;
}
}
compiles into
div > span, div > p, div > a {
border: 1px solid #333;
}


Another solution similar to randy's answer is use a variable for .otherClass and >:
#selector: .otherClass >;
.myclass {
display:block;
&#{selector} {
div, ul, dl, table {
color:red
}
}
}

Related

Can't apply to direct child when usein :hover

I have a problem with the following css approach.
.element:hover > div > span {
color: #FF0000;
}
On the other hand the following is working
.element:hover div > span {
color: #FF0000;
}
Why is it invalid to use the upper one and is there a workaround for it?

How to translate this selection into CSS?

I have a div inside which there can be any tags.
For example p, span, h1, h4...etc
Few tags like p and h1 have default margins.
I want to write CSS which says
Select the first immediate child of div
For example if the div contained only p tags, I could've written something like -
div > p:first-child {
margin-top: 0;
}
But here the case is that instead of p, it can be anything. How can I do it?

Select the first immediate child of div.
Both of these will work.
div > :first-child {
margin-top: 0;
}
or
div > *:first-child {
margin-top: 0;
}

div > :first-child {
margin-top: 0;
}
Hope it will work for you !

Nest pseudo class like hover/focus into a hyperlink with LESS

I use LESS.
How can I say that the hover/focus belongs to the first > a can I somehow put the hover/focus inside the > a?
> ul > li > a {
color: #fff;
text-decoration: none;
}
> a:hover, > a:focus { // login, register
background-color: #navbar-background-color;
}

You can use LESS's Parent Selector (&) to include selectors belonging to the current selector:
The & operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo-class to an existing selector.
> ul > li > a {
...
&:hover,
&:focus {
...
}
}

Apply style to more than one element

This is an easy one, but i can no find the right way to do this. I have the following style definition:
.main_section nav a {
color:#999;
...
}
So this style applies to the a in the nav in the .main_section. Now I want to extend this so that also li elements are affected. What I would do is to duplicate the code, like:
.main_section nav li {
color:#999;
...
}
But this just feels wrong. I want to unify both style specs into one. How can I do that?

use comma (,) to define same style on multiple elements
.main_section nav a,.main_section nav li {
color:#999;
...
}

Have you tried using a CSS preprocessor such as LESS or SASS.
Using one of these you would be able to write your code like the following:
.main_section {
nav {
a,
li {
color: #999;
}
}
}

Try
.main_section nav a, .main_section nav li
{
color:#999;
...
}

Styling All Anchor Tags Within A <td> Element

i already have a css section:
.leftMemberCol
{
width:125px;
vertical-align:top;
padding: 13px;
border-width:0px;
border-collapse:separate;
border-spacing: 10px 10px;
text-align:left;
background-color:#f2f3ea;
}
for a td section (a left side bar). I want to make all of the links inside this cell be the color green.
is there any syntax like:
.leftMemberCol.a
{
color:#E3E3CA;
}
or any other suggestions instead of having to go to each page and wrapping all the links around another class name.

Just do:
.leftMemberCol a
{
color:#E3E3CA;
}
That will select all anchor tags nested within the element with the class of .leftMemberCol

If the color doesn't work, check if you set it earlier on in your CSS file for any of the pseudo selectors of the a tag, i.e. a:link etc.
override them using
.leftMemberCol a:link,
.leftMemberCol a:hover,
.leftMemberCol a:visited,
.leftMemberCol a:active
{
color: #E3E3CA;
}

replace the last dot with a space
.leftMemberCol a {
style goes here
}
The dot indicates a class. A hash indicates an id (
<div id="home">
can be styled with
#home { }
). A regular html element, like a td or a doesn't need a prefix.

.leftMemberCol a
{
color:#E3E3CA;
}
should do the trick.

You are very close. This is how you select the links inside the cell:
.leftMemberCol a
{
color: #E3E3CA;
}
You can read more about selectors here.
Edit:
If the style doesn't take effect, it's probably because you have some other style defined for the links that is more specific. You can make the style more specific by adding specifiers, for example:
td.leftMemberCol a
{
color: #E3E3CA;
}
As a last resort you can also use the !important directive:
.leftMemberCol a
{
color: #E3E3CA !important;
}

.leftMemberCol>a
{
color:#E3E3CA;
}

.leftMemberCol a
{
color:#E3E3CA;
}
This targets all <a> elements that are descendents of .leftMemberCol

Resources