This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 8 years ago.
Today I was looking at some sample code I found and noticed that the developer used a "+" instead of a "," to select two classes.
.region + .region{
border-left: 1px solid lightgray;
padding-left: 3.5%;
margin-left: 4%;
}
What does the "+" sign do that the "," doesn't? Why would you use it? curiously the same class was selected twice here. Why?
Here is a link to the code pen... http://codepen.io/adobe/pen/vKixh
Im just learning CSS3 and any help would be appreciated. Thanks
They are NOT the same!
+ is the adjacency selector, e.g. selects .region elements following .region elements.
A comma separated list simply allows you to apply one block of styling to multiple classes, thus:
.region, .region{}
Wouldn't actually perform any action that just .region{} wouldnt by itself.
Adjacency selector (MDN article)
(+) This is referred to as an adjacent selector. It will select only the
specified element that immediately follows the former specified
element.
This in mind, .region + .region{} would only apply the styling to a .region after another one, and NOT one in isolation, or the first.
+s and ~s Are Siblings
<div>
<div class="c"></div>
<div class="x"></div>
<div class="y"></div>
</div>
using .c + div {} will style "x" CSS ONLY WORKS DOWNWARDS!
,s Are Multiple Classes
<div>
<div class="c"></div>
<div class="x"></div>
</div>
using .c, .x {} will style both "c" and "x" the same way.
No Space Means More Conditions
<div>
<div class="c x"></div>
<div class="c"></div>
<div class="x"></div>
</div>
using .c.x {} will style "c x"
This is not an alternative notation to , (comma): the + has a totally different meaning, because it is the immediate sibling selector (or adjacent selector), so your rule matches a .region element only when it's adjacent to another previous .region element.
If you have several sibling .region elements, like this
<div class="region">...</div>
<div class="region">...</div>
<div class="region">...</div>
<div class="region">...</div>
.region + .region will match every .region element except the first one.
Since this a CSS2 selector, an equivalent CSS3 selector would be .region:nth-child(n+1)
Related
I am using Angular 12 drag and drop to move a mat-list-item to "dropzone" (cdkDropList) in another component.
When I drag the item over the droplist, the droplist expands as if to make room for the item. Since this is not really a list, this behavior is undesirable. How can I stop it from expanding?
<mat-list-item
cdkDrag
[cdkDragDisabled]="!isDraggable"
[cdkDragData]="r.id"
(click)="selectRecord(r, i)"
*ngFor="
let r of recordList | filterList: searchText:filterField;
let i = index">
<p id="{{ 'Item-' + r.id }}" [innerHTML]="lineTitle(r)"
matLine></p>
</mat-list-item>
<div
(cdkDropListDropped)="svc.dropSub1($event)"
*ngIf="!svc.sub1"
cdkDropList
class="drag-here-column text-center"
style="border: 1px grey dotted; line-height: 300px; font-size: smaller; font-style: italic;">
Drag preferred subject here
</div>
I tried to used dragula but although is easier to configure I ended up having the same issue, where dragula will just add more elements when the destination is full and changing that behaviour was not obvious to me
After searching in many places about how to avoid cdkDropList from autoexpading or growing, I ended up doing a custom drag/drop approach, especially because I need to have placeholders as destination of my objects.
Is really useful to set HTML IDs to each element that is going to be dragged, in this way you can recognize origin and destination based on those id (for example concatenating a prefix of the container with the position ('contA_1','contB_9')
Here is one basic example that once you understand can help you setup your drag/drop event handlers and how to update the model to reflect the drop operation
https://idkblogs.com/angular2/2/Implement-Drag-and-Drop-in-Angular-2-4-5-6
Acutally I have two questions:
Is there any way to configure tinymce to allow only one element in the content with a specific class/attribute? For example, I need only one <div class="title"></div> element in the content, so when you edit this element and press Enter, it creates another <div class="title"/>. Rather, I want just a div with a different class (i.e. <div class="text">). Is that possible?
Is there any way to define allowed elements inside a div? For example, the only valid elements inside <div class="text"> are <br> and inline text. If you try to put a div/p/whatever inside, it will clean it out?
Thanks!
1. forced_root_block : 'div',
forced_root_block_attrs: { "class": "title"},
need to add a valid_element, valid_children and valid_class settings
https://www.tinymce.com/docs/configure/content-filtering/#valid_elements
https://www.tinymce.com/docs/configure/content-filtering/#valid_children
https://www.tinymce.com/docs/configure/content-filtering/#valid_class
I've a question about BEM structure. Is it semantically correct to mix elements/modifiers? I have a hero and portfolio module. I want to use an portfolio__item in the hero module, but it should use the base styling of the hero__item. Is this an correct way of doing this, is it 'allowed' to mix these elements?
<section class="hero hero--collage hero--bottom-decoration">
<div class="portfolio__item hero__item hero__item--animated">
<a href="http://www.google.nl">
<div class="hero__hover">
<span class="hero__hover__content h1">Hover title</span>
</div>
<img src="http://www.google.nl" class="hero__image">
</a>
</div>
</section>
<section class="portfolio">
<div class="portfolio__item">
<a href="http://www.google.nl">
<img src="http://www.google.nl" class="hero__image">
</a>
</div>
</section>
You can do whatever you want. But BEM methodology says:
block set namespace
It's a little messy to read this.
I can't understand it at a glance.
The goal of BEM - separate blocks so you don't need write same block again. And the same for styles. With this and modifiers you can reuse and tweak every block you need.
You can mix block and elements
<img src="http://www.google.nl" class="block-name hero__image">
So on 'block-name' you can match styles for every instance. On hero__image or another element you can match unique styles.
You can't create elements of elements
You don't need write 2 lvl. Cause name of your block set namespace.
<span class="hero__hover__content h1">Hover title</span>
Just
<span class="hero__hover-content h1">Hover title</span>
docs: https://en.bem.info/methodology/naming-convention/
"Is it semantically correct to mix elements/modifiers" - I assume you want to place portfolio__item element within the hero block - it's not a good thing. You can nest a block within a block but not block's element within another block's element.
You can use modifiers to hero__item element thought like
<div class="hero__item hero__item--portfolio"></div>
which will change it's style.
I have got the following HTML:
some text <b>some bold text</b>
<span property='some property1>
some semantic term2</span>
<p><span id='mark1'></span>
some text <i>some italic text</i></p>
<span property='some property2'>
some semantic term</span>
<span id='mark2'></span>
I would like to select all span elements with a 'property' attribute, which are placed between the span elements with ids 'mark1' and 'mark2' (these are my technical bookmarks, which should be then removed) and unwrap it.
I think the best way to implement it in Java Jsoup is to use the doc.select function. But I can't create the correct CSS query (I need something like: every span elements with property attribute BETWEEN these two elements).
The expected result (after removing the bookmarks):
some text <b>some bold text</b>
<span property='some property1>
some semantic term2</span>
<p>
some text <i>some italic text</i></p>
some semantic term
Any ideas? Maybe something like E ~ F. Thanks a lot!
This is not possible: the Jsoup selector syntax is not expressive enough to select all tags between two arbitrarily-positioned tags.
However, you can use the NodeTraverser class with a NodeVisitor implementation that collects all elements visited between the two bookmark elements. (This should be easier than "some awful recursion" referenced in your comment.)
What is the best way to select a single content element?
I have a static html template like this:
<html>
...
<div class="left clearfix">
<h1><img src="fileadmin/templates/images/ueberschrift_startseite.png" alt="Willkommen" /><span>Willkommen</span></h1>
<p>EINLEITUNGSTEXT 1 EINLEITUNGSTEXT 1</p>
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
<h3>HEADLINETEXT 3</h3>
<p>TEXT TEXT TEXT TEXT </p>
</div>
...
</html>
In my Backend I have added
A Content Element for the <h1>
A Content Element that should be displayed between the <p> Tags where now Einleitungstext1 is displayed
A Content Element that contains the LI for the UL Section
and so on.
All Elements are in the same column.
I what to take my static HTML Template and fill several SPECIFIC parts with elements that can be edited in the backend.
I hope I could explain what my problem is.
How do you configure your templates? Is there a much better way to replace only specific parts of a static template?
Regards,
Max
I assume that you know how to use marks and subparts in TypoScript, in such case what you have to do is set marks in your template, put each CE in separate column (maybe you'll need to add custom columns if all left, default, right and border (0-3) columns are used for other things) and finally just map these columns to the marks.
tip: TemplaVoila allows for more combinations as you can map not only container for CE's but also other things (header fields, image fields, TS snippets etc.)