I am trying to use the following selectors in my tailwinds CSS styling
.class > * {
width: calc(100% / 3);
}
Where I assign a class- I can use the > * selectors to assign the following width.
I have researched on the Tailwinds CSS, but have been unable to determine how to apply this to a div enclosing some children.
One idea would be to mix vanilla CSS with Tailwinds CSS—or to use some Tailwinds CSS option that I have been unable to locate.
The simplest way to access children in Tailwindcss is to class [&>] to the parent div. For example, let's say you have 5 child divs. If you want to reach all of the children, it is sufficient to give the [&>*] class. I have created a demo for you to understand better.
Demo
Related
This question already has an answer here:
Difference in applying CSS to html, body, and the universal selector *?
(1 answer)
Closed 3 years ago.
I would like to ask what is the difference between *{} and body,html{}. It changes the view in the html and I want to have a broad knowledge about this. Thanks.
The wildcard (*) will apply the styling to every element found on your HTML page unless you give specific styling for that element. It overrides any possible inheritance for the set property because it is setting that default value for each individual element. If you want to change something in a section that has child elements then you will have to make that change for each child. This can be useful in a few cases (box-sizing is probably the most common use) but most of the time you will not want to use this. Depending on how heavily this is used, it can slow down your page load times.
Setting the styling with body/html allows for inheritance to still take place. Elements within the html/body will still show the styling found here if their default is set to inherit. This will still allow a closer parent to the child to override the styling. In CSS, the best option is to be more specific.
The *{} selector (Universal selectors) matches elements of any type. (MDN).
body,html{} select body and html elements.
Consider the following example:
* { /* Selects all elements */
color: blue;
}
html,
body { /* Selects html and body element */
color: green;
}
<html>
<body>Body</body>
<footer>footer</footer>
</html>
*{}
is a universal selector. It will implement the styling of all the elements. If you want to do some changes with styling of the particular element then you have to override it.
body,html{}
will do the same for you. But there is one scenario. If you want to inherit the properties from the parent then body,html{} is definitely going to play this role. It is used for the inheritance of properties
There are tens of CSS rules I would like to be applied on a section of a page - this part is easy:
.generalStyles a,p,button,div.foo {
/* many styling rules here*/
}
However, when I mark a section of a page with class="generalStyles", I would like certain subsections not to inherit those styles, such as descendants of class="noGeneralStyles" (1). This should work with arbitrary nesting.
What I am looking for is a selector that could be translated into:
Inherit CSS rules if you are a descendant of .generalStyles, but not
when .noGeneralStyles is a closer parent
An interactive jsFiddle example can be found here
EDIT: The solution (if there is any) should not make any assumptions of inner HTML
(1) - the reason is there are way too many CSS rules to reset
You won't be able to limit or otherwise control inheritance chains using selectors alone, not even through combining :not() and descendant selectors for the reasons given here and here. You will have to provide an overriding rule for elements within .generalStyles .noGeneralStyles.
How about using direct descendant selectors? > means it will select button tag, which is direct child to an element having class noGeneralStyles or generalStyles
Demo
.noGeneralStyles > button {
color: black;
}
.generalStyles > button {
color: red;
}
Is there a way to apply CSS styles to dynamically generated divs?
In this case, In Wordpress, I have a div class of .profiles and dynamically generated div ID's within that class of #profile-1, 2, 3 etc.
What I want to do, is apply the same styling to each profile-1, 2 etc div id's without having to specify the styling in each and every one within the stylesheet.
Is this possible?
Thanks!!
I may not be fully understanding the question, but couldn't you just create a style for the class .profiles in your css? If all of your divs use that class, then it should work just fine.
.profiles { (put your style here) }
You could do this in your css:
div[id^="profile-"] { your styles }
If the only childs inside <div class="profiles"> are your targeted divs, you can style them all this way:
.profiles div {
/*your style here*/
}
Another way to address this problem would be to add a class to all of your divs (and then style that class). In Wordpress, you can do that easily in the template files.
I have a file like
<div>
<div class="abc">
<div>
<!--some more divs inside-->
</div>
</div>
</div>
What I want to do is to apply styles only to the first div. I tried to use div:not(.abc, .abc *), div:not(.abc):not(.abc *), div:not(.abc), div:not(.abc) * but none of these worked. It would be hard to edit the html, because there would be many files to be edited. Also the code shown above appears in different places, so using > selector is not the solution... Does someone know how to do this?
You cannot reliably use the :not() selector in CSS for excluding an element and/or its descendants. The reason for it is explained in this answer (and some others that it links to):
You can't use combinators. This works in jQuery, but not CSS:
/*
* Grab everything that is neither #foo itself nor within #foo.
* Notice the descendant combinator (the space) between #foo and *.
*/
:not(#foo, #foo *)
This one is particularly nasty, primarily because it has no proper workaround. There are some loose workarounds (1 and 2), but they usually depend on the HTML structure and are therefore very limited in utility.
And since your markup is unpredictable enough that you cannot edit it or use the > selector, I'm afraid there's not much of a way out for you other than to either find a way to apply a class to your top div and use that class, as demonstrated by Fluidbyte, and/or use jQuery, as implied above.
I usually find it's easier to include what you need via a class then try to exclude descendant elements. See the fiddle here: http://jsfiddle.net/cLtHg/
That takes care of inheritance issues and is much more cross-browser friendly.
If you're really not touching the HTML, then a simple although dirty approach would be to apply styles to the first div and then remove them from subsequent divs, like so:
div {margin-bottom: 20px; border: 1px solid #ccc;}
div div {margin-bottom: 0; border: none;}
The major drawback here is that some styles in the child divs may get removed unintendedly. Depends on how they're styled in the first place.
Use :first-child with the ID or Class of its parent Element. If you are unable to catch the element using CSS, it is suggested to use Javascript or jQuery.
Have you tried :first-child or :nth-child() selecor?
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.